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:

Email:
Subject:
Message:

“;
}
?>

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

AJAX Contact Form with PHP and jQuery

Email:   
Subject:   
Message:  

mailform.php

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

AJAX Contact Form with PHP and jQuery

#loading, #success{display: none}

Email:   
Subject:   
Message:  






Sending your message....

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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    $(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:

AJAX Contact Form with PHP and jQuery

1
#loading, #success{display: none}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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();
});
}
});
});
});
})
});

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