There are so many times we don’t want to use any PHP file (say contact.php) directly for our HTML websites to process contact form rather we prefer to use HTML contact page (say contact.html). It is not a hard task, we can achieve this by using Ajax or jQuery. In this tutorial I am describing the easiest way to do the same.
The form will be in any HTML extension page with validation. What we need a separate PHP file for parsing email function only.

Here are the screen shots of the forms.

Step 1: Create a HTML page (contact.html) and write the form code with jQuery library CDN and validation script file  adding

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type='text/javascript' src="js/validation.js"></script>

<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>

Step 2: Add a JS file for the form validation and 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 . This is the main Ajax function

$.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');
 }
 });

Step 3: Create a php file as email.php and write down the main PHP mail function.

<?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';
}
?>

You can see this Ajax HTML Contact form as live demo from here as well as download the full source code of this working contact form.  I recommend to download the source code to get all the necessary codes, functions and styles. DEMO DOWNLOAD