How to Create PHP Contact Form with AJAX

 

 

Any Web sites that use them have a nice little AJAX Contact Form. AJAX is a great way to submit the data to be  updated without a page and is an excellent tool for certain aspects of a website as a form of contact.
So how are we going? Today we are taking it step by step and build AJAX and PHP Contact Form.  We use jQuery and the validation code popular e-mail on Google Code (originally from AddedBytes) found to help us.

 

also try this Contact Form ( Contact Form by CSS-Tricks.com )
 

 

HTML and Form Markup

Now we need our HTML and form markup. We will try to keep it relatively simple.

<form method=’post’ action=’assets/php/contact-send.php’>
<fieldset>
<legend>Contact Us</legend>
<label for=’name’>Name (required)</label>
<input id=’form_name’ type=’text’ name=’name’ value=” />
<label for=’email’>Email (required)</label>
<input id=’form_email’ type=’text’ name=’email’ value=” />
<label for=’subject’>Subject</label>
<input id=’form_subject’ type=’text’ name=’subject’ value=” />
<label for=’message’>Message (required)</label>
<textarea id=’form_message’ rows=’10′ cols=’40′ name=’message’ value=”></textarea>
<input id=’form_submit’ type=’submit’ name=’submit’ value=’Submit’ />
<p class=’hide’ id=’response’></p>
<div class=’hide’>
<label for=’spamCheck’>Do not fill out this field</label>
<input name=’spam_check’ type=’text’ value=” />
</div>
</fieldset>
</form>

The jQuery/Javascript

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”&gt;
</script>
<script type=”text/javascript” src=”assets/js/ajax.js”></script>
<link rel=”stylesheet” type=’text/css’ href=’assets/css/style.css’ media=’screen’ />

Let run through the logic of what we want the jQuery code to do for us, before you encrypt it.
You will find this will help you think about things and work more efficiently.

1. Include the jQuery library, we have in our head section of your HTML
2. When the form is clicked, ensure that we return false.
3. Setup our necessary variables holding our form values.
4. Show the user that work is being done (e.g. Loading…).
5. Make the AJAX request to our contact-send.php file with input fields as POST data.
6. Grab the response from the php file, and display it under the form, in the response element we have in our HTML page

<script type=”text/javascript”>

$(function(){
//Do what we need to when form is submitted.
$(‘#form_submit’).click(function(){
//Setup any needed variables.
var input_name = $(‘#form_name’).val(),
input_email = $(‘#form_email’).val(),
input_subject = $(‘#form_subject’).val(),
input_message = $(‘#form_message’).val(),
response_text = $(‘#response’);
//Hide any previous response text
response_text.hide();

//Change response text to ‘loading…’
response_text.html(‘Loading…’).show();
//Make AJAX request
$.post(‘http://dev-tips.com/demo/ajax_contact_form/assets/php/contact-send.php&#8217;, {name: input_name, email: input_email, subject: input_subject, message: input_message}, function(data){
response_text.html(data);
});
//Cancel default action
return false;
});
});
</script>

 

Related articles

• Head First jQuery (oreilly.com)
• 25 Excellent Ajax Techniques and Examples | Emre Saraçoğlu’s … (emresaracoglu.com)
• AJAX implementation of will_paginate gem (thinkingblogger2326.wordpress.com)
• Loading external content with Ajax using jQuery and YQL (amphee.wordpress.com)
• http://zoomzum.com/best-and-usefu-jquery-plugins/ (zoomzum.com)
• Using jQuery and jQuery ui with Zend Framework (mahtonu.wordpress.com)
• A Free Introduction to Ajax Tutorial (hebatelniel.wordpress.com)
• AJAX and PHP (blogs.sitepoint.com)
• AJAX Gotchas (blogs.sitepoint.com)
• Tuff time to think about linking ajax and php (mohanraaj.wordpress.com)