Blog

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

ajax-basic-contact-form

Basic Form

ajax-contact-form-validated

Validated Form

Step 1: Create a 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 . This is the main Ajax function

 

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

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
  • Bluebell Developer

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

  • Someone

    Not good idea without server side validation!

    • azhari1991

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

      • http://www.wavesdream.com/ Sanjay Bhowmick

        I know that, but I tried to give some coding idea of the developers in my post.

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

    • http://www.wavesdream.com/ Sanjay Bhowmick

      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 = ‘yourname@gmail.com'; //Recipient’s E-mail

  • Maggie Jones

    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:

    http://wiki.dreamhost.com/Sender_Domain_Policy_and_Spoofing#Sender_domain_policy._What_is_it.3F

    • http://www.wavesdream.com/ Sanjay Bhowmick

      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.

  • Sharmelon

    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 >> http://www.sadaworld.com << 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.

    ………………………………………………………………………………………………………………………………

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

    • http://www.wavesdream.com/ Sanjay Bhowmick

      If you email me [info at wavesdream dot com] the source code of then website in zip format if the size is not large then I can check and fix the issues.

  • http://www.irwinassociates.eu/ Graham

    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?

    • http://www.wavesdream.com/ Sanjay Bhowmick

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