Google Forms and jQuery Validation
We got a great response to our How to style Google Forms but there was one question that kept coming up in the comments: “How do I get my newly styled Google Form to validate?”
Well, we’ve gone back to the drawing board and come up with a solution! This short tutorial will show you how to get your Google Forms to validate using snippets from the jQuery javascript library.
At the end of this tutorial your Google Form will be able to show unique error messages without losing any of the functionality that we built into our original Google Form styling tutorial.
Step 1. Download the Bassistance plugin
We’ll be using the brilliant Bassistance jQuery plugin for this tutorial.
Click here to go to the Bassistance website, then download the jQuery plugin pack from their website.
Note: The Bassistance pack is an excellent resource. It’s chock full of great demos of the plugin so do take the time to check it out in full.
For this tutorial you will only need one file. It’s called jquery-validate.js and you will find it in the pack you download from Bassistance.
Step 2. Upload the jQuery validation plugin
Upload jquery-validate.js to your server. For the purposes of this tutorial I’m going to upload the file to http://www.morningcopy.com.au/js/jquery-validate.js.
Step 3. Start with a styled form
Open up your styled Google Form in a html editor. I’ll take the form we created in our original Google Form tutorial as a starting point: http://www.morningcopy.com.au/tutorial/step-9.html
Step 4. Add jQuery code
Add this code between the header tags on your form page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="http://www.morningcopy.com.au/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#commentForm").validate({meta: "validate"});
});
</script>
Note: You will notice that one of the jQuery scripts links directly to the Google Code library. You can download the jquery script and host it on your own server but I think you’re safe leaving it on Google.
Step 5. Add the ‘commentForm’ id
Add the commentForm id to the form action. eg.
<form action="http://spreadsheets.google.com/viewform?formkey=cHFiaFR6N1BJSHVuNHQzRVZBbDd0Wmc6MA.." method="post" target="hidden_iframe" id="commentForm" onsubmit="submitted=true;">
Step 6. Add a ‘required’ class
Add the required class to your Google Form input fields eg.
<input type="text" name="entry.1.single" value="" class="required" id="entry_1">
Note for newbies: If you form already has class you need to replace it with with required rather than add an additional class.
Step 7. Add a ‘title’
Add a title to your Google Form input fields. The title will be the error message that appears when a user fails to type in a required field. You can make it whatever you like. eg.
<input type="text" name="entry.1.single" value="" class="required" title="Please tell me how how blue the sky is dammit!" id="entry_1">
Step 8. Repeat
Repeat this process for each of your required input fields.
Step 9. Style the error messages
If you’ve maintained Google’s CSS naming convention you can style errors by adding a new style to your stylesheet called label.error. Here’s the style we used on the example form.
label.error {
display: list-item;
color: #ff0600;
font-size: 12px;
list-style-position: inside;
padding: 5px 0 0;}
Click here to see our updated form.
Step 10. Adding Email Verification.
Most people will be happy with these required fields but if you also need email verification in your form here’s a little more code that will help you do that.
Add this email address verification class to your email input field eg.
<input type="text" name="entry.3.single" value="" id="required" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/>
Click here to see our updated form with email verification!
I hope this tutorial helps you get the most out of Google Forms.
If you have any questions about this tutorial please don’t hesitate to ask them in the comments.
Still stuck?
If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like FormStack.
Recent Posts
- Brand new website for Tranquil Water
- Fig & Cherry food blog gets a makeover
- Need a desk in Surry Hills? Share our space!
- New client: CPS Property
- How to style Google Forms: Redux
Popular Posts
- 153How to style Google Forms
- 48Google Forms and jQuery Validation
- 24How to style Google Forms: Redux
- 14Google Forms Update
- 5Email Marketing
We're Social!
Subscribe
© morning copy | Terms & Conditions | Privacy Policy | Sitemap
Thanks for this – the last tutorial has been really helpful, and this makes the forms even more practical. Cheers.
So in depth and well explained Dillon! Nice work.
so just to clarify, the jQuery validated form described above cannot redirect to a custom thank you page? thanks!
i’m trying to merge the code generated by:
http://sneakysheep.com/google-docs-form-tool.php
with the code from the above jQuery validation tute…thinking a ‘sheepyjQuery’ or ‘sheepymorning’ combo :)
if jQuery could take care of validation, whilst sneakysheep took care of redirection that would be cool. sneakysheep has this right before the form tag:
and this form tag:
so there’s a bit of a conflict there with the jQuery form tag:
hmm…
can anyone think of a way to merge them?
thanks! :)
@hiho No, the jQuery validated form can redirect to a custom thank you page.
Check out my example:
http://www.morningcopy.com.au/tutorial/validated-text-fields.html
On Submit the user is redirected to a custom Thank You page.
Re: SneakSheep. I can’t vouch for that code. If you continue to have problems I suggest you check out my first Styled Google Form with Custom Redirect tutorial.
Wonderful! Much help for integrating Google forms into websites, but I couldn’t get the email validation to work. Maybe you can tell me what I did wrong? I used
input type="text" name="entry.1.single" value="" id="required" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"for the email address input, but it only validated that it was a proper email if I entered something in the text field. The form will submit with an empty field without any warning. ??
Thanks for posting your tutorials!
Same here – using Firefox – your example accepts a blank email address??
@ Sacha and Geoff
Here’s an updated example with the email required: Click here to check it out!
It’s a really simple change.
In Step 10 replace
class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}with…
The only problem with this version is that you need to update the javascript to change the error messages which makes it a little less accessible for people.
Apologies if you got stuck on this!
Thank you Dillon it works like a charm!
Thanks for the great tutorial. How would you go about in validating radio buttons?
@ BJ
As luck would have it I just helped a mate add validation to radio buttons.
Here is the example: http://www.morningcopy.com.au/tutorial/plus-radio-buttons-validation.html
It’s not difficult to do. Following Step 10 of this tutorial, add some extra javascript.
<script src="http://YOUR-WEBSITE-URL/js/jquery.metadata.js" type="text/javascript"> script type="text/javascript"> $.metadata.setType("attr", "validate"); $(document).ready(function() { $("#commentForm").validate(); });Then in the first radio input of the set you want required add this:
Good luck!
Dillon
@ Dillion
Good on ya mate! :-) I just checked back to this page and that worked like a charm. I really appreciate the help!
-BJ
cool
Is there away to validate that the email address is correctly entered by making the form filler add their email address twice?
@ Lara K
It’s definitely possible. Check out the original Bassistance tutorial for the full range of validation functionality on offer: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Thank you
Ohh .. I have my second numpty question ready!
Is it possible to add some sort of Captcha to the form to stop spam being entered into the spreadsheet ?
I’ve seen some websites that ask a simple question like what is 4+2 ..
I’m just investigating the possibilities before I find a developer.
@ Lara K
It would be tough to add Captcha validation to this particular solution because Google controls the form submission.
If anyone has time to research a solution I am all ears :)
Hi All,
I had been using this method successfully but recently it stopped working—submitting the form takes me to the Google form page, where all fields need to be refilled.
Has anyone else encountered this? I noticed a couple of hidden inputs on the Google form page, but adding them wasn’t enough. Will investigate further…
peace – oli
@Oli
Yes, it’s the new fields!
Check out our fix here:
http://www.morningcopy.com.au/news/google-forms-update/
@Dillon Thanks for the heads-up! I got it working again :)
I wonder if anyone knows how to show the Google Form sending confirmation in place. I mean instead of going to the Google Docs thanks page, or a thanks page on your own site, to have a “Sent successfully—thank you!” message fade in or slide down over the form, then disappear a couple of seconds later…
TIA!
@ Oli
Glad we got you back up and running!
I try to keep the tutorials on Morning Copy as accessible as possible but your AJAX contact form idea sounds good for an advanced tutorial.
If anyone has the time or inclination please submit it here!
Thanks Dillon for the tutorials on the custom Google form. I’m using iWeb ’09 and I’m having difficulty getting the jQuery validation to work properly. The &lt;script&gt; tags are inside the HTML snippet since I’m unable to place them in the &lt;header&gt; tags. Would this prevent the validation from working? Thanks for your assistance!
@ Michael
Glad you found the tutorials useful!
I get so many Qs from iWeb users. I should probably check this program out!
Please post up a link to your site and I can take a look for you.
Hi Dillon-
Below is a link to my styled Google form in which I\’m trying to add validation. Please let me know if you need any further info. I certainly appreciate your assistance.
http://www.team-colin.org/Team_Colin/RegistrationTest.html
Best regards,
Michael
@ Michael
I can see 2 things you need to fix before your form will work.
1. You need to turn off all the required fields you set up on your original Google form. The jQuery will be able to spot the require fields with the markup you have correctly entered in the input fields.
2. You need to properly embed your form in your page. I can see you are using iWeb and that program uses a fancy term ‘HTML snippets’ to describe iframes.
This tutorial will show you how to embed the code in iWeb without using HTML snippets:
http://www.techtalkpoint.com/articles/insert-html-code-into-iweb-built-pages/
Good luck!
Not to rain on anybody’s enthusiasm for google forms, but jotform is superior, easier, and also free. Validation is a simple click:
http://www.jotform.com/
@ Frederico
The free version Jotform looks like a really good solution if your form gets less then 100 submissions a month.
The premium version runs you US$9/month for unlimited form submissions.
I just spent the better part of a day trying to get the jQuery validation to work with the Google Forms. Was going crazy because kept returning an error when trying to validate and was submitting to the iframe regardless of validation.
Finally figured out that it was the versions which was causing the problem!!!
I got it working with jQuery 1.2.4 and validate 1.5.2
The latest version of both seemed to break no matter what I did.
Thanks for the guiding:) But is there any way to deal with the form with page break?
Just want to say THANK YOU. I searched a while for this and this was the only helpful article on the subject.
@Davide Thanks for the heads up on possible problems with more recent versions of jQuery!
@N2ray Thanks. You’re welcome! A solution for multi-page forms is on the to-do list for 2010.
@Bjorn You are most welcome!
I am trying to use the jquery validation, but cannot get it to work. I have no idea why. Would you mind taking a look?
A small test form: http://student-groups.usm.maine.edu/msasp/app_test.html
The final form that I want to use the validation on: http://student-groups.usm.maine.edu/msasp/app.html
Thanks! This is a great tool.
@Smith I took a look at your test form. You are almost there.
The only possible problem I could see is where you call in the commentForm jscript and some (seemingly) unrelated jscript alerts. Try calling them in separately.
Thanks
I’m confused how to use some of the other jquery functions. I’d like to be able to use the RANGE function to force someone to answer the question “what is 2+4?” and have the Range validation be between 5-7 (to at least help relieve some spam). Any ideas? Thanks.
I’ve got the form working–
Is there any way to have the form email me when someone submits?
I just figured it was easier using google’s built in email notification rules– Downside is that it doesn’t include form data– just a link to the updated spreadsheet. Works for me though!
Another question I have is how do you add a user ID– So you could for instance,
have another form pop up after they submit – to collect more information.
How do I add the required tag to a Paragraph Text Field.
This is my code.
Message
*
Please tell us how tca can help
sorry this is my code.
Message
*
Please tell us how tca can help
@Glenn
Your code didn’t come through. You can send us an email if you are still stuck.
Great post and great solution.
I have problems with IE6.
My forms are within iframes and the thank you page is on the parent level.
So the hidden iframe has onload=”parent.location=’thankyou.php’”.
On IE6 it takes 2-3 clicks on the submit button to get the thank you page.
More than that, on each click the form is submitted to Google.
If I give up the parent.location everything is ok. If I give up the jQuery validation script everything is ok. Parent.Location + jQuery validation do not work for me well on IE6.
Thanks!
Dear Dillon,
Thanks for the great how-to and detailed step-by-step instructions!
There’s a tiny point I’d like to mention: in step 6, “Add a ‘required’ class” should change to “change the existing class to ‘required’”. It can be really misleading for average users if they just add another class to the tag.
Thanks again!
Best regards
Mori
Good shout Mori!
I’ve updated the instructions per your suggestion.
[...] how to add form validation and email verification to your styled Google Forms with our Google Forms and jQuery Validation [...]
I found a solution.
on IE6 (xp sp2 with no windows updates), the “submit” button did not function properly and it took 2-3 clicks to get the thank you page.
Solution – in the hidden iFrame that is used to change the “thank you” page:
Repeat the action “window.location=’http://YOUR-THANK-YOU-PAGE-URL’;” 3 times.
window.location=’http://YOUR-THANK-YOU-PAGE-URL’;
window.location=’http://YOUR-THANK-YOU-PAGE-URL’;
window.location=’http://YOUR-THANK-YOU-PAGE-URL’;
Somehow it works.
Great Solution. Congratulation.
We are using your solution with several form on the web…
We have problems only with email verificatioin, beacause, don’t reconize a empty imput…the script validate a wrong mail, but not a empty imput….
Best regards from chile.
Pablo
@Pablo
Glad you got some use out of our little tutorial! Check out my comment further up the thread about fixing email validation with an empty input.
It’s 2 small changes to the form code (to fix the empty input bug) and the js code (to change the validation message). I’ve kept it out of the main tutorial because I think messing around in javascript is more complex than necessary for our average reader. We try to keep these tutorials as accessible as possible. I hope you understand and you didn’t tear your hair out too much!