How To Create Your Own 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:

<div class="loader"></div>
<div class="bar"></div>
<div id="container">
  <form id="contactForm" method="" action="mail.php">
  <p>
    <label for="name">Name </label>
    <input id="name" name="name" />
  </p>
  <p>
    <label for="email">E-Mail </label>
    <input id="email" name="email" />
  </p>
  <p>
    <label for="message">Your Message </label>
    <textarea id="message" name="message" rows="4" cols="30" ></textarea>
  </p>
  <p>
    <input class="submit" type="submit" value="submit"/>
  </p>
  </form>
</div>

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.

<?php
//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);
?>
<!--Display a thankyou message in the callback -->
<h1><span>Thank you  <h10><?php echo $name ?></h10></span></h1>
<p>
  <span>Your message will be answered as soon as possible.</span>
</p>
<h3>Message sent on: </h3>
<p>
  <span><?php echo $todayis ?></span>
</p>

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.

<script type="text/javascript" src="yourDirectory/jquery.js">

Jquery is a javascript framework created to make life a lot easier, if its your first time using it, check out 15 Days of Jquery. We want to create a function to send our form without taking us to another page. We can do this like so.

//engage on the page load
$(function() {
  //trigger ajax on submit
  $('#contactForm').submit( function(){

    //hide the form
    $('#contactForm').hide();

    //show the loading bar
    $('.loader').append($('.bar'));
    $('.bar').css({display:'block'});

    //send the ajax request
    $.get('mail.php',{name:$('#name').val(),
                      email:$('#email').val(),
                      comment:$('#message').val()},

    //return the data
    function(data){
      //hide the graphic
      $('.bar').css({display:'none'});
      $('.loader').append(data);
    });

  //stay on the page
  return false;
  });
});

This code will trigger an event when the form is submitted, which will hide the form and display a loading bar. The $.get() is the line that makes the ajax call to mail.php which sends the form details via a GET method. Once the ajax has been successful the result will then be displayed on screen. This injects the contents of mail.php to the contact.html page.

Step 4 – The CSS

The last step is to add some css styling to the form to make sure we can show and hide things correctly. Its not a neccesity, but it makes it look cleaner.

body {
  font-family:helvetica;
}

.loader {

}

.bar{
  display:none;
  background: url('ajax-loader.gif') no-repeat;
  margin-left:20px;
  margin-top:50px;
  height:20px;
  width: 230px;
}

#contactForm{
  float:left;
  position:relative;
  background-color: #fdfdfd;
  height: 200px;
}

#container {
  padding:20px;
  float:left;
  position:relative;
  height: 200px;
  width: 100px;
}

Step 5 – Put It Together

If you put all the code together your contact.html should look like this.

<html>
<head>
<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript">
//engage on the page load
$(function() {
  //trigger ajax on submit
  $('#contactForm').submit( function(){

  //hide the form
  $('#contactForm').hide();

  //show the loading bar
  $('.loader').append($('.bar'));
  $('.bar').css({display:'block'});

  //send the ajax request
  $.get('mail.php',{name:$('#name').val(),
                    email:$('#email').val(),
                    comment:$('#message').val()},

  //return the data
  function(data){
    //hide the graphic
    $('.bar').css({display:'none'});
    $('.loader').append(data);
  });

  //stay on the page
  return false;
  });
});
</script>
<style type="text/css">

body {
  font-family:helvetica;
}

.loader {

}

.bar{
  display:none;
  background: url('ajax-loader.gif') no-repeat;
  margin-left:20px;
  margin-top:50px;
  height:20px;
  width: 230px;
}

#contactForm{
  float:left;
  position:relative;
  background-color: #fdfdfd;
  height: 200px;
}

#container {
  padding:20px;
  float:left;
  position:relative;
  height: 200px;
  width: 100px;
}

</style>
</head>
<body>
<div class="loader"></div>
<div class="bar"></div>
<div id="container">
  <form id="contactForm" method="" action="mail.php">
  <p>
    <label for="name">Name </label>
    <input id="name" name="name" />
  </p>
  <p>
    <label for="email">E-Mail </label>
    <input id="email" name="email" />
  </p>
  <p>
    <label for="message">Your Message </label>
    <textarea id="message" name="message" rows="4" cols="30" ></textarea>
  </p>
  <p>
    <input class="submit" type="submit" value="submit"/>
  </p>
  </form>
</div>
</body>
</html>

So by using just 2 files we have created your very own powerful ajax conatct form. Its a simple as that. Download the code and try it for yourself.

Related tutorials:

Client-Side Form Validation with jQuery Photoshopping a Unique Contact Form 10 Javascript Ajax Tabs 100 Ajax Tutorials and Resources