Website Design Peterborough, Jigowatt – AJAX Contact Form; Add or Remove Custom Fields

AJAX Contact Form; Add or Remove Custom Fields

Posted by Chris on Thursday, January 14th, 2010 at 1:21 pm

In a burst of Wordpress fever we decided to write another blog post to help all of our ThemeForest / CodeCanyon customers.

Alongside our ThemeForest and CodeCanyon success comes Customer Support. We get a lot of questions from users needing a point in the right direction so we thought we’d make it easier for us both and explain how to add custom fields to our ever popular AJAX Contact Form.

Add a Custom Field Tutorial

In this example we’re going to add a new simple text field (Your Height) which we want all users to fill in (a required, validated field).

Step One

Firstly, backup backup and backup again, once you’ve done that we need to edit our HTML to include our new field, we’re going to add this one under the ‘Your Name’ field.

In the included index.html file find the following lines..

1	<input name="name" type="text" id="name" size="30" value="" />

Below it we’re going to insert our new text field..

1
2
3

<br />
<label for=height accesskey=H><span class="required">*</span> Your Height (cm)</label>
<input name="height" type="text" id="height" size="30" value="" />

Now save and close index.html, that’s the first step out of the way.

Step Two

This is an often overlooked though most important step of this tutorial.

We’re going to edit the Javascript handler (the AJAX part) of the contact form.

In the js/jquery.jigowatt.js file find the following line..

1	name: $('#name').val(),

For this example add the following code immediately below.. (please note the comma , after the line – this is important)

1	height: $('#height').val(),

Once done the section of the code should look like this..

1
2
3

name: $('#name').val(),
height: $('#height').val(),
email: $('#email').val(),

Save and close jquery.jigowatt.js, that’s the second step done!

Step Three

The third and final step! We’re going to add our new field to the PHP form handler. This will validate it’s contents and put it into the e-mail.

In contact.php find the following line (aprox line 5)

1	$name = $_POST['name'];

Add the following code immediately below..

1	$height = $_POST['height'];

In contact.php find the following lines (aprox line 13)

1 2	echo '<div class="error_message">Attention! You must enter your name.</div>'; exit();

Add the following code immediately below..

1
2
3
4
5
6

} else if(trim($height) == '') {
echo '<div class="error_message">Attention! Please enter a your height.</div>';
exit();
} else if(!is_numeric($height)) {
echo '<div class="error_message">Attention! Your height can only contain digits.</div>';
exit();

This piece of code checks that the user has firstly entered a value, and the further checks that they have only entered a numeric value. The only variables within this are $height and the error message you want to display if it finds a discrepancy.

And finally, place our validated variable into the e-mail.

Find the following (aprox line 70)

1	You have been contacted by $name with regards to $subject

Replace this with the following (notice the sentence change to include our new $height variable)

1	You have been contacted by $name who is $height cm tall with regards to $subject

And that’s it, you’ve just added a new field to your AJAX Contact Form! Upload the changed files and give it a test. Any questions, feedback or suggestions please use our comments box below.

Share and Enjoy:

This entry was posted on Thursday, January 14th, 2010 at 1:21 pm and is filed under Blog, General, ThemeForest. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “AJAX Contact Form; Add or Remove Custom Fields”

John Penzel says:

February 8, 2010 at 3:06 pm

Hi there, I stumbled upon your blog via Yahoo and google while trying to find motorcycle shift linkages and your web site caught my eye.

Reply
CodeCanyon Customer says:

February 16, 2010 at 12:41 am

Thank You for all the helpful article. They really helped me a lot! You just got a new subscriber now!

Reply
Miguel Berke says:

February 20, 2010 at 12:26 am

Always good to see, this was obvious a informative article. In theory would like to be such a good writer too. You need time to creat that brilliant and in addition real effort to write a good article.

Reply
ewok says:

May 17, 2010 at 9:08 pm

i brought your script and unfortunately i recognized, that it doesn’t have a real captcha catch…. :/ nice script, but my last useless 5 euro spend in the last month. sry.

Reply