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.morning.am/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.morning.am/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.morning.am/js/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("#commentForm").validate({meta: "validate"});

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 Form Experts.

83 Responses to Google Forms and jQuery Validation

  1. Jean Fayette says:

    Thanks for this – the last tutorial has been really helpful, and this makes the forms even more practical. Cheers.

  2. So in depth and well explained Dillon! Nice work.

  3. hiho says:

    so just to clarify, the jQuery validated form described above cannot redirect to a custom thank you page? thanks!

  4. hiho says:

    i’m trying to merge the code generated by:


    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:


    can anyone think of a way to merge them?

    thanks! :)

  5. Dillon says:

    @hiho No, the jQuery validated form can redirect to a custom thank you page.

    Check out my example:

    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.

  6. Sacha says:

    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!

  7. Geoff says:

    Same here – using Firefox – your example accepts a blank email address??

  8. Dillon says:

    @ 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'}}}


    class="email required"

    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!

  9. Sacha says:

    Thank you Dillon it works like a charm!

  10. BJ says:

    Thanks for the great tutorial. How would you go about in validating radio buttons?

  11. Dillon says:

    @ BJ

    As luck would have it I just helped a mate add validation to radio buttons.

    Here is the example: http://www.morning.am/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() {

    Then in the first radio input of the set you want required add this:


    Good luck!

  12. BJ says:

    @ Dillion

    Good on ya mate! :-) I just checked back to this page and that worked like a charm. I really appreciate the help!


  13. Lara K says:

    Is there away to validate that the email address is correctly entered by making the form filler add their email address twice?

  14. Dillon says:

    @ 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/

  15. Lara K says:

    Thank you

  16. Lara K says:

    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.

  17. Dillon says:

    @ 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 :)

  18. Oli says:

    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

  19. Dillon says:


    Yes, it’s the new fields!

    Check out our fix here:

  20. Oli says:

    @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…


  21. Dillon says:

    @ 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!

  22. Michael says:

    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 &amp;lt;script&amp;gt; tags are inside the HTML snippet since I’m unable to place them in the &amp;lt;header&amp;gt; tags. Would this prevent the validation from working? Thanks for your assistance!

  23. Dillon says:

    @ 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.

  24. Michael says:

    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.


    Best regards,

  25. Dillon says:

    @ 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:

    Good luck!

  26. FREDERICO says:

    Not to rain on anybody’s enthusiasm for google forms, but jotform is superior, easier, and also free. Validation is a simple click:

  27. Dillon says:

    @ 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.

  28. Davide says:

    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.

  29. n2ray says:

    Thanks for the guiding:) But is there any way to deal with the form with page break?

  30. Björn Flóki says:

    Just want to say THANK YOU. I searched a while for this and this was the only helpful article on the subject.

  31. Dillon says:

    @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!

  32. Smith says:

    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.

  33. Dillon says:

    @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.

  34. Smith says:


  35. Nik says:

    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.

  36. Bryan says:

    I’ve got the form working–
    Is there any way to have the form email me when someone submits?

  37. Bryan says:

    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.

  38. Glenn says:

    How do I add the required tag to a Paragraph Text Field.

    This is my code.

    Please tell us how tca can help

  39. Glenn says:

    sorry this is my code.

    Please tell us how tca can help

  40. Frushko says:

    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.


  41. Mori says:

    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

  42. [...] how to add form validation and email verification to your styled Google Forms with our Google Forms and jQuery Validation [...]

  43. Frushko says:

    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.


    Somehow it works.

  44. 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.

  45. Dillon says:


    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!

  46. John says:

    Dear Dillon,

    I made a form based on your great how-to and it works like a charm!
    However, I’d like to put the labels on the right of text input fields and display the error messages under input fields.
    Tried almost anything, but to no avail. :-(

    Any help is greatly appreciated!

  47. Note says:


    Thank you for this article. I followed the how-to and all the comments, and have my form worked.
    However, I still can’t make the email fields validate twice. (checked the bassistance link already. :( )
    Could you point me to the right direction? Thanks in advance.

    • Note says:

      After a while of trial and error, I finally switched to livevalidation.com, but with redirection code from here. It worked! yay
      Thanks for your help.

  48. mari says:

    thanks , great!! I was looking for this solution…THANKS, THANKS, THANKS,

  49. Ky says:

    Hi Dillon,

    Thanks for the tutorial! It has been most helpful and I am more or less done with all the stuff I need, except a couple.

    1. For the radio button validation, the “This is a required field” cuts between my first radio button and its label and I have no idea how to get around this.

    So it looks like this (assuming “o” is the radio button):
    This is a Required Field
    Option Number 1
    o Option Number 2
    o Option Number 3
    o Option Number 4
    o Others _Text box_

    2. Is there any way the “Others” button can be checked automatically if someone enters text in the text box? Otherwise, there could be problems if someone accidentally checks Option 2 and enters information in Others, resulting in Option 2 being recorded when the correct answer should be the information in the textbox.


  50. Kyo says:

    thanx a lot Dillon, it’s very helpful for me

  51. del says:

    Great article but I have a small issue in that I have a version of jquery (1.2.6) running on my webpage and if I try to include google version 1.3.2 the validation routine works but the submit button disappears. Any suggestions?

  52. del says:

    Forgot to add, I have tried running the newer version of jquery in noconflict mode but this doesn’t appear to resolve the issue. If one of my form fields are empty upon clicking the submit button the validation correctly identifies the field that is empty but the submit button then disappears.

  53. Niko says:

    Great Tutorial!
    How would you incorporate the validation of a “blank” hidden text box on a google form (honeypot)? Meaning, before the form is considered valid a text box is required to be “blank”. Once submitted, if the text box is “blank then the data is posted, otherwise the data is dropped. Eitherway, the end user is still redirected to a “Thank you for posting…. page”


  54. Niko says:

    Honeypot for bots…perhaps…

    function redirect() {
    var x = document.getElementById(“somename”).value;
    location.href = ‘http://www.google.com’ + x

    #somename {
    display: none


  55. Niko says:

    div id=”middleinitial”
    input type=”text” name=”middleinitial” value=”” id=”mi” onblur=”redirect()” /

  56. Michael says:

    Great tutorial, the only issue I can’t seem to sort is when submitting using Safari it just sits on the page with the google form. Firefox works correctly and opens the thank you page.
    Is it something to do with window.location=’http……
    I urgently need to resolve this to go live with a competition form, any help would be greatly appreciated.

  57. burke says:

    how much of google’s markup is required? Everything is nested in a one or two divs.

  58. DesignerJoe says:

    Thank you so much for this! Such a lifesaver! I had to add the “required” class in addition to the email verification one. Without it that field would not show an error message if the box was left blank. Your example does the same.

    • DesignerJoe says:

      Used Firebug on the example and added the “required” class. Worked exactly like mine =)

  59. Bharath says:

    Hi Dillionm Thanks for the great indept tutorial man, was wondering how to make a text box only integer accepting like handphone or home phone?
    thanks i know i have to play around the class property not sure what to put tks

  60. Bharath says:

    would u be kind enough to make tutorial on reading the data from the google spreadsheet and displaying in the webpage textbox tks…

  61. bharath says:

    ok I found a problem…’sad’
    I have multiple texboxes that needs email in the same form and sadly the validation only works for the first one any particular reason y?

  62. Gatch says:

    “Submit” button only works in firefox. I want this also to work in safari and chrome.

    Here’s my code:

    in my …

    $(document).ready(function() {
    $(“#commentForm”).validate({meta: “validate”});

    in my …

    var submitted=false;


    Email Address


    what’s wrong with it? thanks in advance!

  63. RJ says:

    Can you couple form validation with form redirect to custom confirmation page?

  64. Coolo says:

    Is there anything wrong with my code? When I click submit without filling in the required forms it does not show the error. My page: http://codenix.org/cooloweb/mcnv/t2.html

    The code: http://pastebin.com/5erNRQck

  65. JasonC says:

    Hey guys. Has anyone tested putting this modified form into Blogspot page? All validation seems to not work and even empty fields will allow submission and show Thank you page.

    I have inserted the required JS files as well. Any idea what’s the problem?

1300 559 343

02 8231 6596

Alstonville NSW 2477