How to create an AJAX contact form

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">&nbsp;</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>";

?>

More Tutorials at NabeelAkhtar.NET

Nathan Pakovskie is an esteemed senior developer and educator in the tech community, best known for his contributions to Geekpedia.com. With a passion for coding and a knack for simplifying complex tech concepts, Nathan has authored several popular tutorials on C# programming, ranging from basic operations to advanced coding techniques. His articles, often characterized by clarity and precision, serve as invaluable resources for both novice and experienced programmers. Beyond his technical expertise, Nathan is an advocate for continuous learning and enjoys exploring emerging technologies in AI and software development. When he’s not coding or writing, Nathan engages in mentoring upcoming developers, emphasizing the importance of both technical skills and creative problem-solving in the ever-evolving world of technology. Specialties: C# Programming, Technical Writing, Software Development, AI Technologies, Educational Outreach

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top