How to create a simple HTML contact form with Ajax & PHP

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 do 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 an HTML page (contact.html) and write the form code with jQuery library CDN and validation script file  adding.

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 .

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


This Post Has 18 Comments

  1. Bluebell Developer says:

    This is eaxtly what I was looking for some days ago. Tested the script and it works like a champ. Thanks.

  2. Jessica Guillermo says:

    Where do I input the receiver’s email in the email.php? Right now it’s sending to the sender’s email. To and from.

    • In your email.php file you have a line as
      $to = $_REQUEST[’email’]; //Recipient’s E-mail
      Write your email id in the place of $_REQUEST[’email’];
      So the modified line will look like this

      $to = ‘[email protected]’; //Recipient’s E-mail

  3. Maggie Jones says:

    Hi, Thank you so much for this. This is a dream come true. I just want to humbly give one tip to people like me who might have a success message, but see that the email is not being sent. This could be due to the “from” header. Some webhosts block “spoofing”. Remove the..

    $headers .= “From: ” . $_REQUEST[’email’] . “rn”; // Sender’s E-mail

    …from email.php and it will work again. I think the other way to solve this is to edit your php.ini file. Sounds scary :) Here’s some info here:

    • Hi Maggie, you are right. I just used a sample PHP mail function in the email.php file. The developer can change the email function fully as per server. Can be used SMTP email instead. So, the email.php was not my point of concern. Users have own choice to customize this replacing the header info. Thanks for sharing your knowledge.

  4. Sharmelon says:

    Hi, thanks for this great post. It is indeed dream come true for me. I built an enquiry form on a site using the process here. Check the site >> << I encountered some issues initially which i was able to resolved. For a while, i could send and receive mail successfully until everything changes, but i don't know what went wrong. Now mail aren't delivered with the validation script. When i hit the send button, the "sent successfully" box wouldn't come up and mail don't get sent. The problem is with the script, because when i removed the script using only the email.php, the mail was sent and received successfully. Meanwhile, the validation works well when errors occur.
    Here is my script, please review. I will be glad for your professional help and advice here.



    //Stop form submission & check the validation

    // 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;
    if(email.length == 0 || email.indexOf('@') == '-1'){
    var error = true;
    if(subject.length == 0){
    var error = true;
    if(message.length == 0){
    var error = true;

    // 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
    //Display the success message
    //Display the error message
    // Enable the submit button again
    $('#send_message').removeAttr('disabled').attr('value', 'Send');

  5. Graham says:

    Hi. Thanks for this. Like others it is just what I need. Just one thing though, having successfully sent the message it would be good if the form was no longer displayed. Is there some way this can be done?

    • Graham, it is possible to hide the form after successful form submission. You can check the call back function and for successful message you can write a script which will make the form css as ‘disply:none’.

  6. surebzz says:

    Can we test on localhost?
    I am getting error on clicking send

    Notice: Undefined variable: message in D:xampphtdocsurbanicemail.php on line 6

Leave A Reply