Easy Contact Form Validation in Expression Engine
I love Expression Engine, but I didn’t like how EE handled contact form validation so I went searching for something I could use to validate my contact form instantly so visitors were not taken to another page which would tell them that they missed a required field with a link back to the contact form. I think any time you take a user to a different page (which doesn’t look like the other pages on your site) you risk the chance of confusing the visitor and that is something that potentially could cause them to leave your site and not return.
For an example of what we’ll be duplicating, check out my contact form and click into one of the fields, but leave it blank. Now click in another field, you will see the instant validation telling you that you missed a required field.
Take note, I did not develop this. Andrew Tetlaw is the developer of this form validation magic. You can check out this site for a more information on this technique. So lets get down to business!
Step 1
Download the FreeForm module from Solspace for Expression Engine.
Step 2
Set up a page that you would like to use for your contact form (I am going to assume you already know how to do this).
Step 3
Check out the code I’m using on my contact page. Feel free to copy it if you want. There are a few things to take notice of in this code. One is the “form_id” bit. Whatever you use for your form_id, it must match the “Validation(’contact’,” javascript bit which follows the FreeForm code. I am using “contact” as my form_id, feel free to use anything else instead. The next thing you must take note of is that each form input has a class. This class is what tells the validation code what type of field it’s suppose to be validating, so if you have an email field, you’ll want to validate the field to make sure that people actually enter a valid email address format (email@email.com) instead of simply something like “Test”. A list of these classes can be found at Andrew’s site. For my form, it’s pretty straight forward. I’m using “required validate-alpha” on the name field so that it only can contain alphanumeric characters. I’m using “required validate-email” on the email field to ensure users are entering a valid email address. Last I’m using a simple “required” class which has not specifications for what the field can contain, just that it is a required field. Each input has an id as well. I’ve not tested the form without the id’s, I just used them because the example on Andrew’s site used them.
Step 4
Next there are two javascript files that we must call by linking to each one in the head of our document. I have simply created a new template group called “Javascript” and a new template for each of the javascript files. One template is called “validation” and the other is called “prototype”. In the head of the document that the contact form is on, you must link to these files like this:
<script type="text/javascript" src="{path="javascript/prototype"}"></script>
<script type="text/javascript" src="{path="javascript/validation"}"></script>
Take note that the “prototype” file is located first (above validation) in the order. This is the only way I’ve been able to get it to work, so don’t place the validation code above the prototype code. You can copy the contents of these files here: Prototype and Validation. You should have already created a new template group called “Javascript”, so now create two templates in that group called “Prototype” and “Validation” with the “template type” set to javascript. Post the contents of each file into the corresponding template.
Step 5
The last step is not a required one, but it really adds a little extra to your form validation. By default, the validation advice (the text that pops up under the form fields) is not styled, it’s just plain text. As you can see on my contact form, I’ve changed the font color to red, as well as a little added effect with an error icon. Here is the code I’m using to style the validation advice:
.validation-advice {
color: red;
background: #fff url(images/alert.gif) no-repeat left center;
padding-left: 22px;
}
Finished
There you have it. Easy form validation with Expression Engine and the Freeform module. Since I’m using the FreeForm module, it’s very easy to mark fields as “required”, as you can see I’ve done in the opening exp:freeform tag. For this example, marking fields required in the freeform tag has no effect since we are using the javascript to validate the form. What if someone has javascript disabled you ask? Well that’s when the required fields in the FreeForm tag comes into play. With javascript disabled, FreeForm will still validate the form using the default error template functionality that is built into EE which lets users know that there was an error with the form. Like I said, I don’t really like this, but if a user has javascript disabled, it’s better than not having any validation at all.
Hopefully someone reading will find this useful. I know I’ve seen a few threads in the EE forums asking for similar functionality built into the next version of EE. If you cannot get this to work, feel free to contact me and I’ll help the best that I can. I’m not a programmer and I know next to nothing about javascript, so please no javascript questions. 
Update
It was brought to my attention that the name field in the contact form did not accept spaces, dashes, apostrophies, etc. I checked into a fix for this and found my answer. If you would like to add the ability for your users to add different characters in the name field besides just A-Z, you’ll need to open up the “validation” javascript file. Once you have the javascript file open, you’ll be looking for this snippet of code:
[’validate-alpha’, ‘Please use letters only (a-z) in this field.’,
function (v) {return Validation.get ‘IsEmpty’.test(v) || /^
[a-zA-Z]+$/.test(v)
Once you’ve located the code (it’s near the bottom of the document), simple add a space between “a-z” and “A-Z”, this will allow spaces in the name field. If you would like to add any other special characters, just add them after the last “Z”. Here’s what mine looks like: [a-z A-Z-’] (notice I’ve added a dash and an apostrophe to the end.
If you enjoyed this post, make sure you subscribe to the full RSS feed.
Related Posts
Comments
Nice article.
“With javascript disabled, FreeForm will still validate the form using the default error template functionality that is built into EE”
The silly thing is that EE uses javascript for the link which takes the user back to the form, thus being quite user-unfriendly to anyone without JS. Using php to create the link would have be much better imho.
Posted on Mon Jul 30, 2007
I didn’t realize that Adam. I’ll have to check it out. Maybe EE will come up with a better solution in their next version? We can only hope. 
Posted on Tue Sep 11, 2007
Javascript can be beneficial, because spammers usually disable it on their machines… you can work with that knowledge, and disable the “Submit” button for a couple seconds or something to slow down the automated bots.
Posted on Mon Oct 29, 2007
How do you get this javascript to work with captcha. As in also making the javascript validate the captcha value ???
Posted on Thu Nov 1, 2007
David: Sent an email your way David. Let me know if you didn’t receive it.
Posted on Fri Nov 2, 2007
Thanks for the article. I started with your example and added a little jQuery magic to get validation to work with EE’s Stand Alone Entry Form. More here.
Posted on Mon Nov 26, 2007
Jason: Glad you were able to get it to work. Yeah, I’ve never used it with a SAEF, but I’m glad you were able to figure out a workaround. I’m not much of a programmer and honestly all the javascript is over my head. I just wanted to post my technique for getting it to work with EE. 
Luckily, no one has had major issues getting it to work so I’ve not had many questions that I couldn’t answer.
BTW: Left a reply at the EE forums.
Posted on Tue Nov 27, 2007
Good one! Thanks for sharing this. I wanned to implement fvalidation today, but no results. I’ll try your method. Thanks
Posted on Wed Feb 13, 2008
Bdesign: No problem. Hope you get it working. Since posting this, I’ve actually discovered a couple other solutions that I think are better and probably much easier to implement. I went ‘round and ‘round with this one before I finally got it to work.
Here are the other two I’ve came across:
Live Validation
Bassistance jQuery Validation
Posted on Wed Feb 13, 2008
You could try to implement the same technique at the comment form. :D It would be nice. Anyway, what technique are you using for the spam prevention? I like it.
Posted on Thu Feb 14, 2008
Bdesign: Yeah, I’ve thought about implementing it with the comment forms. I’m actually planning a redesign of this site whenever I can find the time so I really haven’t worried to much about improving anything. There are a lot of things with the site that I’ve let get away from me over the last year and it’s driving me nuts.
Anyway, the spam prevention on the comments is the Accessible Captcha and I’m also using Akismet in case anything gets by the captcha. Works pretty well.
Posted on Thu Feb 14, 2008
I use Akismet as well. Thanks for the link for Accessible Captcha. Expressionengine is the best :X I’ll implement the form validation tonight. Thanks again
Posted on Thu Feb 14, 2008
Great tutorial Deron - thanks.
The only thing I’d point out is that if there are any EE users out there that have the Debug Preference set to 0 in Output and Debugging Preferences then this won’t work. For some reason EE will parse javascript braces as EE tags in this mode and create javascript errors. To get around this problem, just change the Debug Preference to anything other than 0.
Hope this helps anyone else that was scratching their head!
Jim
Posted on Mon Apr 28, 2008
Jim: Thanks for the heads up! I appreciate it. I’ve been meaning to write an updated follow up article on this topic. I’m still using this technique, but I’ve came across a better way to do form validations with jQuery.
Posted on Fri May 2, 2008
MySQL ERROR:
Error Number: 1054
Description: Unknown column ‘subject’ in ‘field list’
Query: INSERT INTO `exp_freeform_entries` (`author_id`, `group_id`, `ip_address`, `entry_date`, `edit_date`, `status`, `form_name`, `name`, `email`, `subject`, `message`) VALUES (’1’, ‘1’, ‘76.5.145.173’, ‘1214869893’, ‘1214869893’, ‘open’, ‘’, ‘KevinBrown’, ‘support@pixelcraftwebdesign.com’, ‘hey’, ‘??’)
This is the error I get when using your code...What am I doing wrong?
Posted on Mon Jun 30, 2008
KevinBrown:
I’m sorry, no, I don’t know what any of that means. Unfortunately I’m not a MySQL expert or even a novice for that matter. I’ve not heard of anyone else having this problem though. Since posting this article, I’ve actually discovered a better way for form validation, might want to check it out. I’ll be switching to this method for Random Jabber in the next redesign.
Posted on Fri Jul 4, 2008
I actually figured this one out. I deleted the ‘subject’ field and that caused EE to render an error.
Posted on Fri Jul 4, 2008
KevinBrown: Great news! I’m glad you got it sorted out. I figured it was something simple, but I didn’t have any idea what. 
Posted on Wed Jul 9, 2008
My form works! But my validation is still the EE validation. Do how i turn this off and use this validation?
Posted on Mon Aug 18, 2008
Lakeshia: Well, you don’t technically turn off the default EE validation. With the javascript in place, it simply validates the form before the user even has a chance to get to the EE validation area. Sounds to me like it’s not recognizing the javascript files. How are you linking to them? Also, it does make a difference as far as what javascript file is called first, what order do you have them in in the < head > of your document?
If you look up to my comment number 17, you can see a link that I posted for a new validation method that I’ve begun to use on my new sites. I’ve just not had a chance to switch Random Jabber over yet. Take a look at it, I think you’ll find it’s easier.
Posted on Mon Aug 18, 2008
I’m calling the javascript files externally.
Posted on Mon Aug 18, 2008
Lakeshia: Are you calling the “prototype” file before you’re calling the “validation” file? I know that Prototype has to come first in the order, if it doesn’t, it won’t work. I ran into that myself.
Posted on Mon Aug 18, 2008
yes im calling the prototype file first. But i’m going to try your other method and see what happens.
Posted on Mon Aug 18, 2008
Lakeshia: Okay, sounds good. Let me know how it goes. I found it to be a much easier solution.
Let me know of you get stuck or anything.
Posted on Mon Aug 18, 2008
I got the same problem as KevinBrown with the error. Error 1054.
However when I tried removing the subject field, I got a separate error:
The form you submitted contained the following errors
* The following field is required:
Return to Previous Page
I’m stuck. Any ideas?
Posted on Fri Nov 14, 2008
26Jdawg2k: No not off the top of my head and without seeing the code it would be difficult. If you would like me to take a look, send the code you’re using for the form over to me using my contact page and I’ll have a look.
On another note, I don’t even use this method anymore on my new sites. I just haven’t had the opportunity to update this post or do a follow up. I’m now using this method: jQuery Validation Plugin/. I find it MUCH easier to implement and not near as picky as the Prototype version outlined in this article.
Hope that helps.
Posted on Fri Nov 14, 2008
The message that Kevin Brown mentions and is referenced again is created because the freeform module has a default install that no longer has a subject field or a message field. If you go into the freeform module and add those two fields with those two names, then you won’t get an error. You will get an error about the validation template. I haven’t figured out that problem yet but I’ll post the answer soon. (hopefully):
MySQL ERROR:
Error Number: 1054
Description: Unknown column ‘subject’ in ‘field list’
Query: INSERT INTO `exp_freeform_entries` (`author_id`, `group_id`, `ip_address`, `entry_date`, `edit_date`, `status`, `form_name`, `name`, `email`, `subject`, `message`) VALUES (’1’, ‘1’, ‘76.5.145.173’, ‘1214869893’, ‘1214869893’, ‘open’, ‘’, ‘KevinBrown’, ‘support@pixelcraftwebdesign.com’, ‘hey’, ‘??’)
Posted on Sat Dec 13, 2008
Oops. I’m sorry. The error you get after creating the subject and message fields has to do with the notification, not validation. I should read more carefully. If you are using this author’s code, as he gave you permission to, then the site will send notification to whomever you have specified.
You need to go into the freeform templates and create a template named contact_form. It is pretty easy. It will use that form to send the form data via email to the specified site operator. Click on “templates” in Freeform and click “Create new template”. Just fill in the “from” and “to” and you’re good to go.
Of course, after that, you will find that the form defaults to a thank you page at /static/thank-you. To make this work, either create the same template that the author uses, or change the code and create your own thank you template.
Thanks again to Deron Sizemore for the tut and the info!
Posted on Sat Dec 13, 2008
Steve: Thank you very much for hanging around and helping some others out. Yes, you’re correct in everything you said. As I read back over the article I see where I really left out a lot of details that I never even thought about before, e.g., creating the necessary templates in FreeForm. I appreciate you taking the time to point out the errors and how to fix them for me since I obviously left some things out. And to think, I thought I put together a pretty in depth tutorial. I’m thinking of writing an update to this one using jQuery to validate the form. I feel that it’s much easier and hopefully when I write that article I won’t leave out any of the small details.
Posted on Tue Dec 16, 2008
test
Posted on Fri Feb 20, 2009
what a great info, this is really what i am looking for today. thanks.
Posted on Mon Mar 30, 2009
thanks for this nice explanation, it’s so useful for me.
Posted on Wed Jun 10, 2009
wow, that’s great, thanks for informing.
Posted on Sat Jun 20, 2009
Recent Articles
- Promote LogoGala and Win Some Prizes
- LogoGala Goes Live!
- Calling all Logo Designers!
- My New Project: LogoGala
- Improved Browser Standards = Bad News for Front-end Developers?
- Question: Is it Essential for an Inspiration Gallery to Have Ratings?
- What’s In a Business Name? Everything?
- Kentucky Golfing is Now Live
- Questions Answered: What it’s like to Run a Web Gallery
- Random Jabber Turns One Year Old!
Popular Articles
- Improve the Functionality of Your Blog's Homepage With One Small Change
- If You're a Web Developer Your Skills are Inferior to Other Professionals
- My Own Icon Set - Sizcons
- Easy Contact Form Validation in Expression Engine
- Why Social Networking Traffic Sucks
- You've Built It, But Will They Come?
- Why are the Comment Links on Your Blog Set to Nofollow?
- How Many Websites Do You Manage?
- Do You Find Blogging Easier or Harder Than You Thought it Would be?
- How Far Have You Come Since Your First Website Design?
Topics
- Blogging (17)
- Bookmarks (1)
- Browsers (2)
- Business (4)
- Contests (2)
- ExpressionEngine (3)
- Icons (2)
- Internet (1)
- Logos (4)
- Making Money (1)
- Random Jabber (26)
- SEO (1)
- Web Development (15)
- Writing (1)
My name is Deron Sizemore and I am a web designer, web publisher, blogger and serial internet entrepreneur living in Lexington, Kentucky.
Nice! Thanks for the tutorial
Posted on Thu May 17, 2007