Ajax based contact form

If you want to make an application which respond quickly without refreshing the page then, JSON(JavaScript Object Notation) and AJAX(Asynchronous JavaScript And XML) combination is great to achieve that. In this post we are making a simple Ajax based contact form which respond the result in JSON format that we want, and with the help of jquery we display the JSON data.

Through AJAX we are sending the contact form data to a php file(submit_contact_form.php) and then getting the response as an JSON format, but as you see that in my php file, i didn’t used the ‘json_encode()’ function, the reason behind this is ‘json_encode()’ require PHP5 or above. But in this example i created the same format with the help of ‘echo’ that will work for me in PHP4.4.9 too.

So, Here is the HTML structure for the contact form, just put this structure inside the body tag.

<div id="container">
<form id="con_form">
<table cellpadding="6" cellspacing="" width="100%">
<tr>
<td width="150" align="left">
<label>Name :</label>
</td>
<td width="200" align="left">
<input name="name" class="txt_box" size="30" />
</td>
<td align="left"></td>
</tr>
<tr>
<td width="150" align="left">
<label>Subject :</label>
</td>
<td width="200" align="left">
<input name="subject" class="txt_box" size="30" />
</td>
<td align="left"></td>
</tr>
<tr>
<td width="150" align="left" valign="top">
<label>Message :</label>
</td>
<td width="200" align="left">
<textarea rows="4" cols="40" name="message" class="textarea_box"></textarea>
</td>
<td align="left"></td>
</tr>
<tr>
<td width="150" align="left"></td>
<td width="200" align="left">
<input type="button" class="buttn" name="submit" value="Submit" />
&nbsp;&nbsp;
<input type="reset" class="buttn" onClick="this.form.reset();" name="clear" value="Reset" />
</td>
<td align="left"></td>
</tr>
</table>
</form>
<br />
<div id="result">

</div>
</div>

 

Now it’s the time to beautify this contact form, so that it’s look nice and user friendly. i have used some Cross browser style in my css file

body{
text-align: center;
}
#container{
width: 600px;
margin: 0 auto;
border: 1px dashed #dfdfdf;
padding: 10px;
}
label{
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #666;
}
.txt_box{
border: 1px solid #999;
height: 25px;
line-height: 25px;
padding: 0 2px;
}
.textarea_box{
border: 1px solid #999;
resize: none;
padding: 2px;
}
.textarea_box,
.txt_box{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
}
.buttn{
border: 1px solid #999;
color: #666;
background: #dfdfdf;
padding: 3px 5px;
cursor: pointer;
}
.h-event{
background: #999;
border: 1px solid #666;
color: #fff;
}
#result p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
margin: 0px;
padding: 0px;
line-height: 18px;
text-align: left;
}

 

Now it’s time to work with jQuery, follow the given events so that you will get the exact event of this contact form like i have.

jQuery.noConflict();
jQuery(function(){
// Hover effect on buttons
jQuery('input[name="submit"], input[name="clear"]').hover(
function(){
jQuery(this).addClass('h-event');
},
function(){
jQuery(this).removeClass('h-event');
}
);

// Send value with objects
// and gether information with json
jQuery('input[name="submit"]').click(function(e){
e.preventDefault();

// Basic validation

var data = jQuery('#con_form').serialize()
jQuery.ajax({
url: '/modules/ajax-based-contact-form/submit_contact_form.php',
data: data,
dataType: 'json',
success: function(ret_data){
jQuery.each(ret_data, function(i, items){
jQuery('#result').html(
'<p><strong>Result: </strong></p>' +
'<p>Name: '+ items.n +'</p>' +
'<p>Subject: '+ items.s +'</p>' +
'<p>Message: '+ items.m +'</p>'
);
});
//End Each
}
}); // End Ajax Request

});
// End click event
});

 

As you see in the above jquery codes i didn’t used validation for this contact form, because this is a simple example of contact form, and you will append this contact form as much as you want with some strict validations and with captcha too. So that you are prevent from spammers. I strongly recommended that never used the same like the this example, because it’s just for understanding the AJAX request and JSON response.

now finally we require the php file(submit_contact_form.php) that receive the data:

/*
* We are not sending data through
* Email but if you want then just modify the
* below commented line
*/
$name = $_GET['name'];
$subject = $_GET['subject'];
$query = $_GET['message'];

if( !empty($name) && !empty($subject) && !empty($query) ){

/*
* $email = 'youremailhere';
* $message = "From: " . $name . "\r\n\r\n";
* $message .= $query;
* mail($email, $subject, $message);
*/

echo'{';
echo '"data":{"n": "';
echo $name . '", ';
echo '"s": "';
echo $subject . '", ';
echo '"m": "';
echo $query . '"}';
echo '}';
}