Create a simple HTML contact form with Ajax & PHP

contact.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type='text/javascript' src="js/validation.js"></script>
<div id='container'>
  <form name="contactForm" id='contact_form' method="post" action='email.php'>
    <h2>Ajax HTML Contact Form</h2>
    <h3>After submission of the form the email will be sent to the email id you entered.</h3>
    <p> Your Name:
    <div id='name_error' class='error'><img src='images/error.png'>Please enter your name.</div>
    <div>
      <input type='text' name='name' id='name'>
    </div>
    </p>
    <p> Your E-mail ID:
    <div id='email_error' class='error'><img src='images/error.png'>Please enter your valid E-mail ID.</div>
    <div>
    <input type='text' name='email' id='email'>
    <div>
    </p>
    <p> Email Subject:
    <div id='subject_error' class='error'><img src='images/error.png'>Please enter the subject.</div>
    <div>
      <input type='text' name='subject' id='subject'>
    </div>
    </p>
    <p> Your Message:
    <div id='message_error' class='error'><img src='images/error.png'>Please enter your message.</div>
    <div>
      <textarea name='message' id='message'></textarea>
    </div>
    </p>
    <div id='mail_success' class='success'><img src='images/success.png'>Your message has been sent successfully.</div>
    <div id='mail_fail' class='error'><img src='images/error.png'> Sorry, error occured this time sending your message.</div>
    <p id='submit'>
      <input type='submit' id='send_message' value='Submit Form'>
    </p>
  </form>
  <footer>This demo form is the reference to the article <a href="http://bit.ly/122DCsw" title="How to create a simple HTML contact form with Ajax & PHP" target="_blank">http://bit.ly/122DCsw</a> </footer>
</div>

email.php

<?php
$subject = $_REQUEST['subject'] . ' Ajax HTML Contact Form : Demo'; // Subject of your email
$to = $_REQUEST['email'];  //Recipient's E-mail

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= "From: " . $_REQUEST['email'] . "\r\n"; // Sender's E-mail
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$message .= 'Name: ' . $_REQUEST['name'] . "<br>";
$message .= $_REQUEST['message'];

if (@mail($to, $subject, $message, $headers))
{
	// Transfer the value 'sent' to ajax function for showing success message.
	echo 'sent';
}
else
{
	// Transfer the value 'failed' to ajax function for showing error message.
	echo 'failed';
}
?>

validation.js

 $(document).ready(function(){
        $('#send_message').click(function(e){
            
            //Stop form submission & check the validation
            e.preventDefault();
            
            // Variable declaration
            var error = false;
            var name = $('#name').val();
            var email = $('#email').val();
            var subject = $('#subject').val();
            var message = $('#message').val();
            
         	// Form field validation
            if(name.length == 0){
                var error = true;
                $('#name_error').fadeIn(500);
            }else{
                $('#name_error').fadeOut(500);
            }
            if(email.length == 0 || email.indexOf('@') == '-1'){
                var error = true;
                $('#email_error').fadeIn(500);
            }else{
                $('#email_error').fadeOut(500);
            }
            if(subject.length == 0){
                var error = true;
                $('#subject_error').fadeIn(500);
            }else{
                $('#subject_error').fadeOut(500);
            }
            if(message.length == 0){
                var error = true;
                $('#message_error').fadeIn(500);
            }else{
                $('#message_error').fadeOut(500);
            }
            
            // If there is no validation error, next to process the mail function
            if(error == false){
               // Disable submit button just after the form processed 1st time successfully.
                $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
                
				/* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
                $.post("email.php", $("#contact_form").serialize(),function(result){
                    //Check the result set from email.php file.
                    if(result == 'sent'){
                        //If the email is sent successfully, remove the submit button
                         $('#submit').remove();
                        //Display the success message
                        $('#mail_success').fadeIn(500);
                    }else{
                        //Display the error message
                        $('#mail_fail').fadeIn(500);
                        // Enable the submit button again
                        $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
                    }
                });
            }
        });    
    });