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.

Demo | Download

26 thoughts on “How to create a simple HTML contact form with Ajax & PHP”

    1. actually you can use jquery form validation plugin… there are many out there if you wanna find it…

  1. Jessica Guillermo

    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.

    1. 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 = ‘’; //Recipient’s E-mail

  2. 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:

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

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

  4. 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?

    1. 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’.

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

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

  6. Question: How to prevent someone to access the mail.php directly? I’ve tried the form with disabled JS which sends out blank emails. How to fix this? Should there be a check in the mail.php as well to see if all fields are filled?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.