[Web-development (jquery)] Create Contact Form (CSS, JQuery & AJAX)

Create Contact Form (CSS, JQuery & AJAX)

Demonstration how to create a css form contact form and jquery ajax










Javascript Code

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("form").submit(function(){
 var str = $("form").serialize();
 $.ajax({
 type: "POST",
 url: "contacts.php",
 data: str,
 success: function(msg){
 $("#note").ajaxComplete(function(event, request, settings){
 if(msg == 'OK')
 {
 result = '<div>Your message has been sent. Thank you!</div>';
 $("#fields").hide();
 }
 else
 {
 result = msg;
 }
 $(this).html(result);
 });

 }
 });
 return false;
});
});
</script>

CSS Code

<style>
.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}

.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
body{
 background:#fbf9ee;
 font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
 color:#333;

 }
#main{
 float:left;
 display:inline;
 width:610px;
 margin-left:2px;
 padding-bottom:1em;
 } 
 form{
 margin:1.5em 0;
 padding-top:.5em;
 }
 fieldset{
 margin:0;
 padding:0;
 border:none;
 } 
 legend{
 display:none;
 } 
 label{
 float:left;
 width:120px;
 }
 input, textarea{
 width:250px;
 border:1px solid #dbd3b6;
 padding:5px;
 } 
 textarea{
 height:120px;
 overflow:auto;
 } 
 form p{
 clear:both; 
 margin:0;
 padding:8px 0;
 }
 button{
 border:none;
 padding:5px 15px;
 margin:0;
 float:left;
 background:#2c728a;
 color:#fff;
 font-weight:bold;
 font-size:15px;
 cursor:pointer;
 margin-left:120px;
 } 
</style>

HTML Form

<div>
<h2>Contact Form (JQuery & AJAX)</h2>
 <div></div>
 <form action="javascript:alert('success!');"> 
 <fieldset><legend>Contact form</legend>
 <p>
 <label for="name">Name</label>
 <input type="text" name="name" size="30" />
 </p>
 <p>
 <label for="email">Email</label>
 <input type="text" name="email" size="30" />
 </p>
 <label for="subject">Subject</label>
 <input type="text" name="subject" size="30" />
 </p> 
 <p>
 <label for="message">Message</label>
 <textarea name="message" rows="10" cols="30"></textarea>
 </p> 
 <p>
 <button type="submit" name="submit">Send Message</button>
 </p> 
 </fieldset>

 </form>

 </div>

PHP Code

//contacts.php
<?php
// To
define("WEBMASTER_EMAIL", 'ednalan@gmail.com');
// Reply To
define("REPLY_TO", 'kenshin@gmail.com');
function ValidateEmail($email)
{
 $regex = "([a-z0-9_\.\-]+)". # name
 "@". # at
 "([a-z0-9\.\-]+){2,255}". # domain & possibly subdomains
 "\.". # period
 "([a-z]+){2,10}"; # domain extension 
 $eregi = eregi_replace($regex, '', $email);
 return empty($eregi) ? true : false;
}
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post)
{
 $name = stripslashes($_POST['name']);
 $email = trim($_POST['email']);
 $subject = stripslashes($_POST['subject']);
 $message = htmlspecialchars($_POST['message']);
 $error = '';
 // Check name
 if(!$name)
 {
 $error .= 'Please enter your name.<br />';
 }
 // Check email
 if(!$email)
 {
 $error .= 'Please enter an e-mail address.<br />';
 }
 if($email && !ValidateEmail($email))
 {
 $error .= 'Please enter a valid e-mail address.<br />';
 }
 // Check message (length)
 if(!$message || strlen($message) < 15)
 {
 $error .= "Please enter your message. It should have at least 15 characters.<br />";
 }

 if(!$error)
 {
 $mail = mail(WEBMASTER_EMAIL, $subject, $message,
 "From: ".$email."\r\n"
 ."Reply-To: ".REPLY_TO."\r\n"
 ."X-Mailer: PHP/" . phpversion());
 if($mail)
 {
 echo 'OK';
 }
 }
 else{
 echo '<div>'.$error.'</div>';
 }
}
?>

source : http://google.com, http://tutorial101.blogspot.com, http://lintas.me

Posted by Unknown