This tutorial shows users how to create an AJAX contact form. The form method in this tutorial is set to POST.
Before we begin the tutorial, view the AJAX Contact Form in action.
The AJAX Contact Form uses the POST method to transfer the data from the form to the PHP file. From thereon you can store the data in variables using “$_POST”. This is also illustrated in the code.
There are two pages that you will need. The first page will show the form to the user when the user first visits the page. We will call this page “Form.php”. The other page will process the data from the first page and will return a confirmation message. You can use PHP or any other language to do anything you want. We are going to call the second page “Process.php”.
To get started, first create a form:
There are two <span> sections defined in this page. The first one is highlighted in orange in the above image and the second span is the table that holds the input fields.
The status span will display the status of the form while it is being processed. Once all the information has been processed, the status will read “Ready”.
Following is the code for the Form.php file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX Contact Form NabeelAkhtar.NET</title>
<link rel="stylesheet" type="text/css" href="../../../style.css">
<!------------------------------------------------ AJAX CODE ---------------------------------->
<script type="text/javascript" language="javascript">
var http_request = false;
function show_hint ( p_hint_text, p_span ) {
document.getElementById(p_span).innerHTML = p_hint_text ;
}
function makePOSTRequest(url, parameters, SpanName) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById(SpanName).innerHTML = result;
document.getElementById('status').innerHTML = 'Ready';
} else {
alert('There was a problem with the request.');
}
}
};
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function Contact(obj,SpanName) {
var curDateTime = new Date(); //For IE
var poststr = "name=" + encodeURI( document.getElementById("name").value ) +
"&email=" + encodeURI( document.getElementById("email").value ) +
"&uniqueID=" + curDateTime +
"&msg=" + encodeURI( document.getElementById("msg").value ) ;
var SpanName = SpanName;
//alert (SpanName);
makePOSTRequest('Process.php', poststr, SpanName);
}
</script>
<!------------------------------------------------ END AJAX CODE ---------------------------------->
</head>
<body>
<table width="316" border="0" cellpadding="4" cellspacing="0" class="blueBorder">
<tr>
<td colspan="2" class="title1"><a href="http://www.nabeelakhtar.net">Tutorials @ NabeelAkhtar.NET</a><a href="http://www.nabeelakhtar.net"></a> </td>
</tr>
<tr>
<td width="141" class="title1">AJAX Contact Form </td>
<td width="157" class="orange">Status: <span class="greenBold" id="status">Ready</span> </td>
</tr>
</table>
<span id="ContactFormSpan">
<table width="316" border="0" cellpadding="4" cellspacing="0" class="blueBorder">
<form action="javascript:Contact(document.getElementById('ContactForm'),'ContactFormSpan'); show_hint('Sending Data, Please Wait...', 'status');" method="post" name="ContactForm" id="ContactForm">
<tr>
<td width="141" align="right" class="normal">Name:</td>
<td width="157"><input name="name2" type="text" class="inputBlack" id="name" size="20" maxlength="50" /></td>
</tr>
<tr>
<td align="right" class="normal">Email:</td>
<td><input name="email2" type="text" class="inputBlack" id="email" size="20" maxlength="50" /></td>
</tr>
<tr>
<td align="right" class="normal">Message:</td>
<td><input name="msg2" type="text" class="inputBlack" id="msg" size="20" maxlength="50" /></td>
</tr>
<tr>
<td align="right" class="normal"> </td>
<td><input name="Submit2" type="submit" class="buttonBlue" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" align="left" class="normal">Note: This is a demo form. This form will NOT send out emails. </td>
</tr>
</form>
</table>
</span>
</body>
</html> Following is the code for the “Process.php” file:
<?php
$name = stripslashes($_POST['name']);
$email = stripslashes($_POST['email']);
$msg = stripslashes($_POST['msg']);
echo "
<table width=\"316\" border=\"0\" cellpadding=\"4\" cellspacing=\"0\" class=\"blueBorder\">
<tr>
<td align=\"left\" class=\"title1\">Your Information has been processed</td>
</tr>
<tr>
<td align=\"left\" class=\"normal\">Name: $name <br> Email: $email <br> Message: $msg</td>
</tr>
<tr>
<td align=\"left\" class=\"normal\">Note: This is a demo form. This form will NOT send out emails. </td>
</tr>
<tr>
<td align=\"left\" class=\"normal\"><a href=Form.php>Try Again</a></td>
</table>";
?>
