How To Create Ajax Contact Form

Ajax (Asynchronous Javascript and Xml) has become a very popular tool in web design. This tutorial will teach you how to make an ajax contact form using PHP and Jquery. See the code in action here.

Step 1 – The HTML

To start things off lets create a new file and call it contact.html, inside it we want to create a simple html form, like so:

Name 
    
  
E-Mail 
    
  
Your Message 
    
  

  

Now we have a standard contact form which will submit to mail.php

Step 2 – The PHP

Now we want to create a php file called mail.php this will handle the results of our form.

//declare our variables
$name = $_GET['name'];
$email = $_GET['email'];
$comment = $_GET['comment'];
//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "A message";
$message = " Message: $comment \r \n From: $name  \r \n Reply to: $email";

//put your email address here
mail("email@address.com", $subject, $message);
?>



Thank you  
Your message will be answered as soon as possible.


Message sent on: 

In this page we create some variables, which gather the name, email and message from the form, then using the php mail() function it will send this to the email address specified. for the sake of this tutorial i have used email@example.com, but you can use whatever you like.
Once all this has executed we will display a thank you message. using some of the information we have collected.

Step 3 – The JQuery

Now comes the clever part. To start We will need to include the jquery framework. you can download this from the jquery website, then attach it like so.

Name 
    
  
E-Mail 
    
  
Your Message 
    
  

  

So by using just 2 files we have created your very own powerful ajax conatct form. Its a simple as that.