• Home
• About
• Contact Us
• Recent Work

Creating an AJAX Contact Form

on Nov 20 in ajax, javascript tagged by Dave

There are many libraries available for javascript that make ajax requests very simple, you can create requests in just a couple of lines of code but sometines it is nice to write your own. The main use for AJAX is to give quick responses to the user without the need for a page refresh or being redirected to a new page.

In this contact form there will be three fields: Name, Email and the message. The values from the fields will be sent to a PHP script and tested. The results will be sent back dynamically to the user. So let's get started.

First, create a html page and we will add a html form containing the 3 fields and the a submit button.

The code for the form is as follows:

 
<form action="scripts/contactsend.php" method="post">
    <label for="name">Name</label>
<input id="name" name="name" type="text" />
    <label for="email">Email</label>
<input id="email" name="email" type="text" />
    <label for="info">Comment</label>
        <textarea id="info" cols="30" rows="10" name="info">
      </textarea>
<div id="contact-loader">
<input onclick="sendContact();" type="button" value="submit" />
</div>
</form>
 

The result will be a simple form that looks like this:

The next step is to write the JavaScript, to keep it tidy it is better to create a new .js file and just add a link to it in the head of the html file.

The first function is the one called from our form in the html page, this simply sets a timeout of 1 second and shows an image to let the user know something is happening. You can generate an animated loader gif at ajaxload.info. It also calls the main JavaScript function called 'ajaxContact' :

function sendContact(){
  window.setTimeout("ajaxContact()", 1000);
  document.getElementById("contact-loader").innerHTML =
   '<img src="images/ajax-loader.gif" alt="loading" />
   checking details... ';
}
 

The next function does all the work.

Here is the code that will need and after I will explain it line by line:

function ajaxContact()
{	
 
   try
   {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
   }
   catch (e)
  {
   // Internet Explorer
  try
  {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
   {
    try
    {
     	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
       alert("Your browser does not support AJAX!");
      	return false;
    }
  }
 }
 
 var email = document.getElementById('email').value;
 var name = document.getElementById('name').value;
 var info = document.getElementById('info').value;
 
 xmlHttp.onreadystatechange=function()
 {
 
   if(xmlHttp.readyState==4)
    {
 
    document.getElementById("contact-info").innerHTML =
        xmlHttp.responseText;
 
   }
 }
xmlHttp.open("GET","sendcontact.php?email="+email+
"&name="+name+"&info="+info,true);
  	xmlHttp.send(null);
}
 

Because Internet Explorer handles a request differently to modern browsers like Safari or Firefox we need to check which browser is being used.

The next step is simply getting the information from the html form. We get the values for each field and assign them to variables.

Next is checking the ready state of the page. There are 5 states that the page will be in as the page is requested.

• » 0: Request is initialised
• » 1: Request set up
• » 2: Request sent
• » 3: Request in Process
• » 4: Complete

Once we have reached ready state 4 we are ready to get our data.

Finally we send our data to our php script called sendcontact.php and return the result to our page.

Below is the PHP that we will need to receive and send our data

 
< ?php
   $to = "you@yoursite.com";
   $subject = "Contact from website";
   $email = $_GET['email'] ;
   $info = $_GET['info'] ;
   $name = $_GET['name'] ;
 
    $messages = 'Contact:';
    $messages .= '<strong>Name:  '.$name;
    $messages .= '<strong>Question:</strong>  '.$info;
 
   //headers for the message
   $headers .= "Content-Type: text/html; charset=iso-8859-1\r\n";
   $headers .= "Content-Transfer-Encoding: 8bit\r\n";
   $headers .= "".$messages."\n";
   $headers .= "--".$num."\n";
 
   $sent = mail($to, $subject, $messages, $headers) ;
 
   if($sent)
   {print "Thank You"; }
   else
   {print "We encountered an error sending your mail"; }
 
?>
 

And that's that, you now have a fully functional AJAX Contact form. If you have any questions or remarks, please leave a comment below.

Copyright © Lemon and Lime Design 2009