During my 7 or so years of working with PHP I have created literally 100′s of enquiry forms. From simple ones containing just a couple of fields to complex ones (sometimes maybe a bit too complex) containing hundreds of different variables. They all essentially however do the same thing; The user enters their details and clicks a submit button, the information is validated and emailed to a specified email address and the user is presented with a success message thanking them for their enquiry.
Don’t get me wrong, this method works absolutely fine, but what with the increasing popularity of AJAX over the past few years I decided to spruce things up a bit with my most recent form creations. By using AJAX to submit my forms I could seamlessly gather the user input and send the email without refreshing the whole page. The end result being a much smoother and user-friendly process.
Based on what I’ve learnt in doing this I’m going to show you how to create a very basic enquiry form using a combination of AJAX, PHP and the Javascript library jQuery. I use jQuery to deal with the AJAX functionality in a simple manner but you could use another Javascript framework or even try to deal with this manually.
Step 1
Create a new file called ‘enquiry_form.html’ and place the below code into it:
<html>
<head>
<title>My Enquiry Form</title>
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function send_enquiry() {
$.post("process_enquiry.php", $("#frmEnquiry").serialize(),
function(returnData){
if (returnData=="success") {
$("#enquiry-form").html("Thank you. Your enquiry has been sent successfully");
}else{
alert("An error occured whilst trying to send your enquiry. Please try again shortly\n\n"+returnData);
}
}
);
}
</script>
</head>
<body>
<div id="enquiry-form">
<form id="frmEnquiry">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>Enquiry</td>
<td><textarea name="enquiry"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="send" value="Send Enquiry" onclick="send_enquiry()" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
At the top of the code we are including the jQuery library and the Javascript that will send the users input to a separate file, process_enquiry.php, that we will create in Step 2. In this Javascript we also deal with the outcome of sending the email; If successful remove the enquiry form and display a success message or alternatively, output an error message if for some reason the email could not be sent.
The code above also generates a simple form containing two fields, ‘Name’ and ‘Enquiry’ and should look like the below image:
Step 2
Now that we have our form we need a PHP script to actually send the email that contains the user’s details. To do so, create another new file called ‘process_enquiry.php’ and copy the below code into it:
<?php
$to = "your@address.com";
$subject = "Enquiry Received";
$body = "A new enquiry has been received:\n\n";
$body .= "Name:\n".$_POST['name']."\n\n";
$body .= "Enquiry:\n".$_POST['enquiry'];
mail($to, $subject, $body);
echo 'success';
?>
Simply change the email address on line 3 to your own address, upload the three files to a webserver (enquiry_form.html, process_enquiry.php and jquery.js) and you’ve just finished creating a very simple AJAX enquiry form. Go on, give it a go. With any luck once you click ‘Send Enquiry’, the form should disappear and present you with a message and an email should drop into your inbox containing the information you entered.
Please note, this tutorial has shown how to create an AJAX enquiry form in it’s most simplest format to show the core processes involved. In order to maintain simplicity and focus on the key elements there has been no validation or security efforts put into the code provided. Adding these once you have the code working is highly recommended.
Hi, I'm Steve Marks, the voice (or at least the typist) behind this blog. I'm 24 and currently live in the UK.