NB: You’ll need PHP4 or higher enabled to use this contact form. You can upgrade your version of php through your .htaccess file.

This is a very lightweight and easily customisable contact form, which uses jQuery to validate the required form fields in real time. No need for clunky contact processes, which navigate the user away from the page they are using to tell them that they failed at completing the form. Now you can tell them that on the same page! And it even works in IE6!

A star is born

So here is a simple contact form that I designed and coded up earlier. I’m now going to show you each step of hooking this bad boy up into a fully functioning jQuery contact form. As I said, this form (like most) is pretty easy to add to and modify, but for the sake of this tutorial, we are going to use four fields, three of which will be required and are marked *.

Now for some code

…

If you check out the example source code below, you’ll probably notice a couple of things:

1.    Form fields are wrapped in div tags
2.    Required fields have a class of “required” (“required email” for the email field)
3.    Form action is

All three are necessary for the dynamic validation to work properly. If you usually style your forms using classes on the fields then you’ll have to use either ids or cascading styles using the form id.

[CODE FOR FORM HERE]

Next, there are a couple of include files which will need to be included in your contact.php file. They are:

1.    cont_process.php
2.    form_mess.php

The first of these two files handles the validation of the form fields and the sending of the email (should all fields be valid). The second file handles the output of the sent message, which is triggered when the completed form is submitted.

The form_mess.php file needs to be placed wherever you want your ‘Message Sent’ feedback to appear. This is usually just above the form itself but this may vary depending on your design. The cont_process.php file needs to be placed inside your document head.

cont_process.php

This file handles all the variables from the form and creates an array, which it then uses to generate an email. It is executed once the form is submitted.

Non-required fields:

$message = trim($_POST[‘message’]);
Required fields:
if(trim($_POST[‘name’]) == ”) {
$hasError = true;
}
else {
$name = trim($_POST[‘name’]);
}

The only difference at this relatively basic level of customisation, is the email field, which requires a second level of validation, to check that not only the field contains data but also that is meets the criteria of a ‘valid email address’.

if(trim($_POST[’email’]) == ”)  {
$hasError = true;
}
else if (!eregi(“^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$”, trim($_POST[’email’]))) {
$hasError = true;
}
else {
$email = trim($_POST[’email’]);
}

You can also play around with the section of code at the bottom of this file too, which handles the generation and format of the email to be sent. Additional emails can be added to the form recipients, separated by a comma.

if(!isset($hasError)) {
$emailTo = ‘[email protected]’, ‘[email protected]’;
$body = “Website Enquiry nnName: $name nnSubject: $subject nnEmail: $email nnMessage: $message”;
$headers = ‘From: Your Site <‘.$emailTo.’>’ . “rn” . ‘Reply-To: ‘ . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

Tip: I recommend putting these two files into an ‘includes folder’, just to keep the site root tidy! Up to you though of course… but remember to change your URLs accordingly.

form_mess.php

This php include will output one of two messages depending on whether all required fields have been filled out or not. Very easy to edit as you see fit!

“

Are we there yet?

”

So that’s pretty much it! If you’re experiened in web design, you can obviously go to town a bit and jazz up the CSS and add new fields into the form should you wish to. All in all, it’s a great little contact form and is really easy to modify. Much better than clunky contact processes that navigate you away from the page you’re on just to tell you that you failed.

Yes, there are some downsides such as captcha integration but this could be done relatively easily. I’ve just left it out of this example for simplicity. Feel free to download the source files and have a play around. Thanks for reading.

About the Author: Jay Pick is a Web Designer at Creare; a Web Design company who also specialise in SEO, internet marketing, e-commerce solutions and web video.