The aim of this basic tutorial is to help you to create a simple (table-less) AJAX Contact Form using jQuery & PHP. It will give you an idea of how you can create similar web applications using jQuery and AJAX. We will have a HTML page which will contain the form, a CSS file, a .PHP page where the data will be sent and another file where the validation function(s) will be located.
Step 1 – Creating the configuration file
config.php
<?php
// To
define("WEBMASTER_EMAIL", "your_name@your-domain.com");
?>Here you should fill the e-mail address where you wish to receive the mail as well as the address where you wish to receive the replies (usually the same).
Step 2 – Creating the css file
style.css
/*
Credits: Bit Repository
CSS Library: http://www.bitrepository.com/
*/
html, body { padding: 0; border: 0px none; }
.notification_error {
border: 1px solid #A25965;
height: auto;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}
.notification_ok {
border: 1px #567397 solid;
height: auto;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
.info_fieldset { -moz-border-radius: 7px; border: 1px #dddddd solid; }
.info_fieldset legend {
border: 1px #dddddd solid;
color: black;
font: 13px Verdana;
padding: 2px 5px 2px 5px;
-moz-border-radius: 3px;
}
.button {
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
background: white;
color: #333333;
font: 11px Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 3px;
}
/* Label */
label {width: 140px; padding-left: 20px; margin: 5px; float: left; text-align: left;}
/* Input, Textarea */
input, textarea {
margin: 5px;
padding: 0px;
float: left;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 11px Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 3px;
}
/* BR */
br { clear: left; }Step 3 – Creating the HTML Contact Page
This is the page where the AJAX call to contact.php is made. I will explain you the JavaScript Code in detail below:
contact.html
<!DOCTYPE HTML>
<html>
<head>
<title>TableLess Ajax Contact Form (Demo)</title>
<meta name="Keywords" content="form, divs">
<meta name="Description" content="A CSS Tableless Ajax Contact Form">
<!-- jQuery -->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
// we will add our javascript code here
jQuery(document).ready(function($) {
$("#ajax-contact-form").submit(function() {
// 'this' refers to the current submitted form
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg) {
// Message Sent? Show the 'Thank You' message and hide the form
if(msg == 'OK')
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
} else {
result = msg;
}
$("#note").html(result);
}
});
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<h3>A Tableless Contact Form (jQuery & AJAX)</h3>
<div align="left" style="width: 500px;">
<fieldset class="info_fieldset"><legend>Contact</legend>
<div id="note"></div>
<div id="fields">
<form id="ajax-contact-form" action="">
<label>Name</label><input class="textbox" type="text" name="name" value=""><br />
<label>E-Mail</label><input class="textbox" type="text" name="email" value=""><br />
<label>Subject</label><input class="textbox" type="text" name="subject" value=""><br />
<label>Comments</label><textarea class="textbox" NAME="message" ROWS="5" COLS="25"></textarea><br />
<label> </label><input class="button" type="submit" name="submit" value="Send Message">
</form>
</div>
</fieldset>
</div>
</div>
</body>
</html>
Once the DOM is loaded (we determine this by using jQuery(document).ready($)), the script checks if the user submitted the form by using $(“form”).submit(). If it is, the form elements (names & values) are serialized in order to pass them to the AJAX Call:
var str = $("form").serialize();$.ajax() takes one argument, an object of key/value pairs, that are used to initalize and handle the request, and returns the XMLHttpRequest object for post-processing (like manual aborting) if needed.
Some options are used to control the behaviour of $.ajax. The information is from JQuery Documentation:
(String) type – This is to determine the type of request that is made: ‘POST’ or ‘GET’. (default is ‘GET’)
(String) url – The URL to request
(Object|String) data – Data to be sent to the server. It is converted to a query string, if not already a string. Is appended to the url for GET-requests. See processData option to prevent this automatic processing.
(Function) success – A function to be called if the request succeeds. The function gets passed one argument: The data returned from the server, formatted according to the ‘dataType’ parameter.
To find out more about $.ajax consider visiting http://docs.jquery.com/API/1.1/AJAX.
The request succeded? In this case we will call the ajaxComplete(callback) function, which executes whenever an AJAX request is completed. The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
I recommend you using the Firefox Extension Firebug, a popular and powerful web development tool. It adds a global variable named “console” to all web pages loaded in Firefox. This object contains many methods that allow you to write to the Firebug console to expose information that is flowing through your scripts. While executing AJAX Code you can check the console to see how the data is sent to the remote files, in this case parse.php.
If ‘OK’ is returned the form hides and a thank you message is shown. If any other text is shown (beside ‘OK’), then there are errors and they will be shown above the form.
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg) {
// Message Sent? Show the 'Thank You' message and hide the form
if(msg == 'OK')
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
} else {
result = msg;
}
$("#note").html(result);
}
});
In the next page of our tutorial we will create: functions.php (which has the e-mail address validator) and contact.php (which is the script that parses the submitted data).
Step 4 – Creating the functions’ script.
functions.php
function ValidateEmail($email) {
/*
(Name) Letters, Numbers, Dots, Hyphens and Underscores
(@ sign)
(Domain) (with possible subdomain(s) ).
Contains only letters, numbers, dots and hyphens (up to 255 characters)
(. sign)
(Extension) Letters only (up to 10 (can be increased in the future) characters)
*/
$regex = '/([a-z0-9_.-] )'. # name
'@'. # at
'([a-z0-9.-] ){1,255}'. # domain & possibly subdomains
'.'. # period
"([a-z] ){2,10}/i"; # domain extension
if($email == '') {
return false;
}
else {
$eregi = preg_replace($regex, '', $email);
}
return empty($eregi) ? true : false;
}This file contains only the e-mail address validator, in our sample, but you can use it to add more (validation) functions which can be used in the contact.php page.
Step 5 – Creating the page which parses the data
contact.php
<?php
/*
Credits: Bit Repository
URL: http://www.bitrepository.com/a-simple-ajax-contact-form-with-php-validation.html
*/
include 'config.php';
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post) {
include 'functions.php';
$name = stripslashes($_POST['name']);
$email = $_POST['email'];
$subject = stripslashes($_POST['subject']);
$message = stripslashes($_POST['message']);
$error = '';
// Check name
if(!$name) {
$error .= 'Please enter your name.';
}
// Check email
if(!$email) {
$error .= 'Please enter an e-mail address.';
}
if($email && !ValidateEmail($email)) {
$error .= 'Please enter a valid e-mail address.';
}
// Check message (length)
if(!$message || strlen($message) < 15) {
$error .= "Please enter your message. It should have at least 15 characters.";
}
if(!$error) {
$mail = mail(WEBMASTER_EMAIL, $subject, $message,
"From: ".$name." <".$email.">rn"
."Reply-To: ".$email."rn"
."X-Mailer: PHP/" . phpversion());
if($mail) {
echo 'OK';
}
} else {
echo '<div class="notification_error">'.$error.'</div>';
}
}
?>In contact.php, we have to determine first if a POST request was sent to the file. If $post is not null, the functions.php file is included (containing the e-mail validator) and the POST fields are declared. Each required field is checked. If any error is found, the $error variable will be filled with that error message. At the end, if $error is null (as it was initially) & the mail is sent, contact.php will output ‘OK’ (which is checked in contact.html). It is is not null, contact.php will output the error(s), which will be shown, of course, in contact.html.
Get Basic
This version contains the basic features that were discussed in the tutorial.
Download | View Demo
Get Advanced
This is an advanced AJAX Contact Form builder that can be used to built a custom contact form. It’s a free and very light version of AJAX Form Pro, my premium form builder. This version is available for BitRepository.com subscribers. Type your details below, confirm your email and you will receive the download link in your inbox.
Get Premium
AJAX Form Pro is a premium Multi-usage AJAX Form builder with lots of features and support for all form elements. Starts from $19.
Customer Testimonials
“Very nice! We went through 8 different scripts, only to be frustrated with broken code, links, and tutorials, to finally find one so simple, beautiful and it works! We are avid PHP programmers, but are not yet too versed with AJAX, so this solution was perfect! Thanks” –
“I had a real need for a clean and stylish contact form. I tried some 11 forms before I decided on one. I have to say your form was the winning choice hands down.” –
“It works very good and it solved the problem of needing a form validation as well a as a success message in the same page.” –
“I am working a project for patisserie web site in Turkey and i used your form form this web site contact page. Belong to me, your form is very useful and successful, thanks a lot.” –