AJAX Contact Form Tutorial with PHP and jQuery

A quick and easy AJAX Contact Form Tutorial using PHP and jQuery. I decided to put this together as I’ve received comments from a number of people who like the AJAX contact form on my main site.

VIEW THE DEMO (note, in the demo, I have commented out the line which actually fires the email) | DOWNLOAD THE FILES

As a base line, we will take the standard PHP contact form example on W3schools. We’ll throw in some jQuery and CSS and modify it slightly to make it to work with AJAX. This is what we will start with:

<html>
<body>
 
<?php
if (isset($_REQUEST['email']))
//if "email" is filled out, send email
  {
  //send email
  $email = $_REQUEST['email'] ;
  $subject = $_REQUEST['subject'] ;
  $message = $_REQUEST['message'] ;
  mail("[email protected]", $subject,
  $message, "From:" . $email);
  echo "Thank you for using our mail form";
  }
else
//if "email" is not filled out, display the form
  {
  echo "<form method='post' action='mailform.php'>
  Email: <input name='email' type='text'><br>
  Subject: <input name='subject' type='text'><br>
  Message:<br>
  <textarea name='message' rows='15' cols='40'>
  </textarea><br>
  <input type='submit'>
  </form>";
  }
?>
 
</body>
</html>

The first thing you will want to do is to separate the code which actually sends the email from the display of the form so you will have two files:

index.php

<html>
<head>
  <title>AJAX Contact Form with PHP and jQuery</title>
</head>
<body>
  <form method='post' action='mailform.php'>
    Email: <input name='email' type='text'><br>
    Subject: <input name='subject' type='text'><br>
    Message:<br>
    <textarea name='message' rows='15' cols='40'></textarea><br>
    <input type='submit'>
  </form>
</body>
</html>

mailform.php

<?php
if (isset($_REQUEST['email']))
//if "email" is filled out, send email
{
	//send email
	$email = $_REQUEST['email'] ;
	$subject = $_REQUEST['subject'] ;
	$message = $_REQUEST['message'] ;
	mail("[email protected]", $subject, $message, "From:" . $email);
	echo "Thank you for using our mail form";
}
?>

We will be using jQuery.ajax() to post the form data through to the send script which requires no further modifications (you can also use jQuery.post() as a slightly simpler way of doing this but I always opt for ajax() as it offers a greater amount of control if needed). But first we need to add a loading indicator and a success message. Both of which will be initially hidden via the CSS. With jQuery, we will show and hide these at the appropriate stage of the process:

index.php

<html>
<head>
  <title>AJAX Contact Form with PHP and jQuery</title>
  <style>
    #loading, #success{display: none}
  </style>
</head>
 
<body>
  <form method='post' action='mailform.php'>
    Email: <input name='email' type='text'><br>
    Subject: <input name='subject' type='text'><br>
    Message:<br>
    <textarea name='message' rows='15' cols='40'></textarea><br>
    <input type='submit'>
  </form>
  <div id="loading">
    Sending your message....
  </div>
  <div id="success">
  </div>
</body>
</html>

Now the jQuery. With the jQuery we will:

  1. Prevent the default form action
  2. Hide the form
  3. Display the “loading” message
  4. Post the form to the send script
  5. Wait for a successful response
  6. Hide the “loading” message
  7. Display the “success” message
$(function(){
      $('form').submit(function(e){
        var thisForm = $(this);
        //Prevent the default form action
        e.preventDefault();
        //Hide the form
        $(this).fadeOut(function(){
          //Display the "loading" message
          $("#loading").fadeIn(function(){
            //Post the form to the send script
            $.ajax({
              type: 'POST',
              url: thisForm.attr("action"),
              data: thisForm.serialize(),
              //Wait for a successful response
              success: function(data){
                //Hide the "loading" message
                $("#loading").fadeOut(function(){
                  //Display the "success" message
                  $("#success").text(data).fadeIn();
                });
              }
            });
          });
        });
      })
    });

Here is the complete code:

<html>
<head>
  <title>AJAX Contact Form with PHP and jQuery</title>
  <style>
    #loading, #success{display: none}
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function(){
      $('form').submit(function(e){
        var thisForm = $(this);
        //Prevent the default form action
        e.preventDefault();
        //Hide the form
        $(this).fadeOut(function(){
          //Display the "loading" message
          $("#loading").fadeIn(function(){
            //Post the form to the send script
            $.ajax({
              type: 'POST',
              url: thisForm.attr("action"),
              data: thisForm.serialize(),
              //Wait for a successful response
              success: function(data){
                //Hide the "loading" message
                $("#loading").fadeOut(function(){
                  //Display the "success" message
                  $("#success").text(data).fadeIn();
                });
              }
            });
          });
        });
      })
    });
  </script>
</head>
 
<body>
  <form method='post' action='mailform.php'>
    Email: <input name='email' type='text'><br>
    Subject: <input name='subject' type='text'><br>
    Message:<br>
    <textarea name='message' rows='15' cols='40'></textarea><br>
    <input type='submit'>
  </form>
  <div id="loading">
    Sending your message....
  </div>
  <div id="success">
  </div>
</body>
</html>

Obviously, there is no validation or styling on the form, it is simply a quick demo on how to make a working contact form using AJAX with PHP and jQuery. If you’d like me to expand on this and incorporate validation and some nice styling, let me know in the comments below and I will write another post to take this contact form a stage further.

Any questions? Feel free to ask.

Want to hear me talk? I co-host the web development podcast “Three Devs and a Maybe”. Check us out here

Did you like this post? Why not subscribe?

37 thoughts on “AJAX Contact Form Tutorial with PHP and jQuery

  1. The example works on localhost but i cant get to work when i implement it it just loads the sendmail script. Help!

      • Ty for quick reply I’l explain better. I run Xampp for Windows and i have 2 directories where 1st is mySite and 2nd is yourExample where i have files i downloaded above. yourExample works on localhost but when i try to implement the same code on mySite it just jumps to mailform.php when i submit.

        • I understand now. It sounds like there is a Javascript error as the e.preventDefault() function is not stopping the form from submitting in the standard way. Are you getting any error messages in your browser console. It could be possible that the external jQuery link is blocked from the 2nd environment?

          Cheers

  2. Thank you Fraser! I was using the jQuery UI DatePicker plugin had been searching for quite some time to find a way to include AJAX form submission using jQuery. I had found a working script that used jQuery 1.3.2 but the version 1.9.1 needed for the DatePicker plugin created a conflict. Your script allowed me to run everything using 1.9.1 thus eliminating the jQuery conflict issue. I was then able to tweak it, save and link it as an external .js, and get everything working together. Thanks!

  3. It is very good but lacks VALIDATION… kindly add validation for the field which is the primary function now our days!

  4. Hey there,

    I’ve tried a lot of Form-Mailers now and I get stuck each time. Best result I got was Email but with dirty page-reload and without success-message. I now tried the version with php AND ajax and the result is: No Email, success-message = my whole index.html code ?? Any further information? (Oh yes, before I forget, why do you use REQUEST on form-fields?)

    • Can you post your code somewhere that I can take a look? Sounds like you may be getting a script error. In the returned data, are you getting any reference to any errors? Also, are you sure you’re running PHP in your dev environment? If not, then you will just be getting the text content of mailform.php returned rather than “Thank you for using our mail form”

      • Hey there, just look at flobuech.ch/

        I took the return_msg out to not flood the page, but with right tools like forefox firebug or dev-tools you’ll be able to look at it, else just enter url of php on root…

        Last but not least:
        -everything is external, php and js. index is index.HTML.
        -it worked before with overwritten version of php, but should do at this point too.

        thx for having a look at it!

  5. Hi again, not sure if my 3. comment has been submitted right, so:
    First of all, I can’t see any script-errors, secondly there is no reference I can see. The returned output looks like the whole index.html like so:

    bla

    just like I coded it and not only the user-output of index.html.
    Then, Yes PHP is running, but I’m only able to test online, maybe I should upload a test_data and do not just develop on my running page, but whatever…

    Some part of it must work at least, cause the form is hiding before giving me a lot of nonsense-content.

    I really hope you could help me!

    Have some nice rowing 😉
    Dude

    • EDIT 2: I hope you know what I mean cause it did again wrong. Just the whole input of the file just as i coded it with every tag from the hyper text markup language.

  6. Hi there again,
    (At first, please delete all pre-comments, looks pretty spamed)

    I got it. Looked like it had problems with jquery.
    Now it really sends the mail, but it calls the php like Srdjan told you.
    I think it has something to do with the e.preventDefault() where you now should use – as I read (console + web) – e.isDefaultPrevented().
    And at least the output is the same again when clicking back in browser. Whole hypertext…

    • Hey there,

      another part “solved”, or however you’d call it. The point why I got my full markup back as output had to do with the “url: thisForm.attr(“action”)”. When I used “url: ‘mailformer.php'” instead it gave me back the right echo-message. Now it’s your turn to find out, specialist 😉

  7. Thanks for the tutorial! It’s so simple and works so well… You mentioned possibly a future post expanding to incorporate validation and I for one would be very appreciative as I’ve had a lot of trouble with validation scripts and cross browser compatibility. Either way, thanks again! This has been so helpful..

  8. Great tutorial! I’d like to try this example within a WordPress theme. In WordPress all php scripts should be put in a separate file called functions.php. is it possible to make the form call a php function from this file without firing all other code inside?

  9. Hi,
    thank you for making this great ajax form tutorial. Everything is working for me, except that the form is submitting twice. How can I prevent this from happening?

Leave a Reply

Your email address will not be published. Required fields are marked *