It’s been over a year since we posted our original How to style Google Forms post – how time flies!

Our solution for embedding and styling Google’s Form app has garnered interest from all over the world and we are continually bowled over by how many questions, queries and messages of gratitude we get about this post on a weekly basis!

In this Redux edition of the How to style Google Forms post we:

  • Revisit the original Google Forms post [Skip]
  • Update our Google Forms and jQuery validation demo [Skip]
  • Show you how to create multi-page Google Forms! [Skip]

How to style Google Forms

Our original post laid out step by step instructions for embedding a Google Form in your website, re-styling the form’s elements and redirecting the user to a confirmation page of your choosing.

Check out the original post and our new, improved version below!

Adding jQuery validation to Google Forms

Our original form had one major flaw. It didn’t support Google’s in-built form validation. We solved that problem by throwing jQuery form validation into the mix.

Multi-page functionality!

Last year Google added a page break option to their forms and ever since we’ve been asked by visitors when we will update our solution to incorporate this new functionality. Well, the time has finally come!

Unfortunately for numerous head-scratchingly boring technical reasons our solution won’t work with Google’s page breaks, BUT we have come up with a way to build multi-page forms by taking a single page form and putting it into a  jQuery wizard.

The jQuery wizard we use in this tutorial was written by The Codemine. Please visit their site for more info and jQuery Wizard resources.

Step 1:Setup and embed your Google Form

Go to our How to style Google Forms post for full instructions on how to setup, embed and style your Google Form.

Step 2:Add validation to your required fields

Go to our Google Forms and jQuery Validation post and find out to add required classes to your required fields.

Step 3: Add your jQuery scripts

Add these jQuery scripts between your <head> tags. You’ll find all the scripts in our downloadable Demo Pack.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.history.js"></script>
   <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.form.wizard-2.0.1-min.js"></script>

<script type="text/javascript">
  $(function(){
  $("#GoogleForm").formwizard({
  //form wizard settings
  historyEnabled : true,
  validationEnabled : true},
  { //validation settings } ); });
  </script>

Step 4: Separate your pages

In our demo we have made each question a separate step but you can have as many or as little questions per page as you like. Each page needs to be wrapped in a span with a unique id. In the example below the span is in bold.

<span class="step" id="first"> <span>Step 1 of 4</span><br>

<div class="errorbox-good"><div class="ss-form-entry">
<label for="entry_1" minlength class="ss-q-title">How blue is the Sky?</label>
<input type="text" name="entry.1.single" value="" class="required" title="This field is required."  id="entry_1">
</div></div>

</span> 

Step 5:Replace the Submit button with wizard navigation

The last step is an easy one.

Simply replace the original Submit button…

<input type="submit" name="submit" value="Submit">

With the new jQuery Wizard navigation.

<div id="navigation">
<input class="navigation_button" value="Back" type="reset">
<input class="navigation_button" value="Next" type="submit">
</div>

That’s it, we hope you enjoyed this tutorial!

As always if you have any questions or want to say Hi, please leave a comment or email via our Contact Form.

Morning Copyis more than a Google Form building company!

We specialize in Copywriting, Email Marketing and Web Design so please drop us a line if you are in need of any assistance.

44 Responses to How to style Google Forms: Redux

  1. Tom says:

    Hi guys.

    Love the tutorial.

    Is there a way to stop the form getting submitted multiple times to the google spreadsheet? I tried with coockies but if someone forgot a required field, it would prevent a second submission

    Hope you can help

  2. Paul says:

    @Dillion

    Thanks a million for this redux post.

    The workaround on multipage using jQuery Wizard is superb !

    Keep up the good work.

    BTW, I really hope this doesn’t violate google TOC
    ( well, at least not until Google itself offers styling functionality within its own.)

  3. John says:

    When I create the multi page form, it works fine in internet explorer but not for chrome or firefox.

    Any ideas?

    • Dillon says:

      Our example works in all major browsers. Post a link to your form and we can take a look for you.

  4. Sean Feeney says:

    Having an onload on an iframe seems to break W3C validation. Any ideas?

  5. Bren says:

    How do i use to conformation page to list the choices made in the form again as a sort of “Here is what you entered” page and then give users the option to print the results.

    For example a if a manager wants to add a user to the computer system they fill out the form and submit. It then redirects them to the conformation page where it relists the choices the mgr made.

    • Dillon says:

      Unfortunately Google Forms won’t do that for you. You could use javascript to capture all the data.

      • Chris Winch says:

        Hey.
        I was wondering if you could expand on the javascript method of capturing the form data?

        Ive been searching high and low for a way to use the form data on the confirmation page but cant seem to get anything working.

        Thanks in advance

  6. bryce says:

    I was trying to style the form I had set up ( https://spreadsheets.google.com/viewform?hl=en&formkey=dGpvaFJycDFTSFVvb3N4eDBaSk90VWc6MQ#gid=0 ) and was unable to proceed because in the source view, I see no opening tag. I do see were the div ends ( @ ) but no begining… Am i not seeing something?

  7. How can I add formatting to my form. I need to center some information and not always have it close to the left margin. I know I can center it on my page, but if the html is one long script it does not allow me to changes sections of the code. I would like to center the heading of my form.

    Also, how can I change the font? Or can I?

    Thank you.

  8. Jonathan says:

    Is there a way to put in your own javascript form validation without messing up the code like this?

    That code doesn’t work, but is there a way to make it work?

  9. Jonathan says:

    Here’s the code:
    onsubmit=”submitted=true;, return validate_form(this)”

    The code in my original post was deleted.

    Thanks in advance.

    • Dillon says:

      You can put in any validation you wish. I’m just sharing the easiest solution that I could come up with.

      @Everyone Please put pre tags around your code so that they appear in their entirety.

      Example. Enter code between pre tags and they will appear in a special styled box.
      • Jonathan says:

        The problem was that the code I did, didn’t work, so I was wondering what the correct code would look like. I think the problem has something to do with me trying to put in a variable and a function, but I’m not positive. Any ideas on how to make this work:
        onsubmit=”submitted=true;, return validate_form(this)”

        Note: This code is an attribute inside of my form tag.

        Any help would be greatly appreciated.

  10. sunny says:

    I love this tut. But what about the new go to page base on answer? Is there are way to style those forms?

    • Dillon says:

      The jQuery Wizard plugin that we used to create the multi-page Google form actually supports different routes based on the answer.

      We’ll take a swing at adding this functionality in a future update but things are too busy at Morning Copy HQ to consider it at the moment.

  11. Nick says:

    Hey guys,

    great tutorial and awesome site! I’ve been working at this for about an hour now, and I finally thought I got it to work (it appears to function fine in terms of validation), but the information isn’t showing up in my spreadsheet. Could you help me figure this out?

    here’s the page i’m testing at: http://nickcamillo.com/ALBW/index.html

    (you have to click sign up for the form to appear)

    Sorry it’s still got your styling at the moment, don’t worry though I’ll change it once I can get the thing to work!

  12. Ryan Ray says:

    Hey Dillon!

    Thanks so much for this form. It has proven super useful for us. I am only stumped by one problem that has been bugging me for about a week now and it is only in IE (go figure!).

    When someone completes the form in IE, if any field was not filled in correctly and the validation message appears for the user to correct their mistake, once the form is submitted and validation is passed IE throws error:

    “Line: 80
    Error: Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.”

    If it is ignored the form still submits and the redirect works fine, but I want to get rid of the error message.. Any thoughts? I could really use some help here.

    Cheers!

    • Dillon says:

      Glad our tutorial was useful!

      I had a quick look at the form on your site. The featured video and navigation buttons all use javascript. I think the issue you’re seeing in IE is caused by a conflict between all those js elements. Best of luck with IE debugging.

      If you need a hand, please drop us a line!

  13. Daniel D says:

    Great tutorial,

    Just a quick question, is there a way to use this with rules set for a form question (for example, if someone ticks the ‘yes’ box it goes to page 3 otherwise if they tick ‘no’ it goes to page 2). Is this possible?

    Thanks! :)

  14. Chris says:

    For email validation it looks like proper addresses are validating but if no text is entered at all it continues on. If I have class=”{validate:{required:true, email:true, messages:{required:’Please enter your email address’, email:’Please enter a valid email address’}}} shouldn’t it require that you enter an email address and not continue if it is empty? You can even try this at your new demo and see it ignore empty email address field.

  15. scott says:

    such a helpful tutorial – THANKS!

    DId anyone find an answer to having a field where the question is 4+4=?

    I would like to add this to my form—but cannot figure out how to require a correct answer.

    thanks for any help!

  16. Skybluethinking says:

    Er…

    With the example Updated Demo: Styled Google Form with confirmation redirect and form validation, did you want to delete the email addresses that have been entered without the person realising that they’d essentially be published on the web?

    Cheers,

    Sky

    • Dillon says:

      I’ve deleted all the recent email addy. Hit us on our Contact page if yours is still in the spreadsheet.

  17. Scott says:

    Hey, so I see to have everything working properly, except that when testing it people are telling me it takes 10 minutes to go to the “thank you” page after hitting submit.

    AND the data is not being added to the spreadsheet. I’m realizing there is some issue with the permissions? What should they be set to or what step did I miss in the form creation.

    Here is the raw form and i get the need permission error:
    https://spreadsheets0.google.com/a/recovermydata.co/viewform?formkey=dDhrVTdBYUFNakZfQzRtUWdwZFdubHc6MQ

    Here is the pretty CSS formated, jQuery, seemly working, but really slow and not form:
    http://recovermydata.co/get-a-quote/

    Thank you for any help!!!

  18. Scott says:

    Found the problem…. I had “Require … sign-in to view this form.” checked.

    Unchecked and it populates the spreadsheet.

    Now on to see how response time works.

  19. Markus says:

    Hi! Instead of using JavaScript to add images to my Google Form, I’ve created a little PHP script that does that in a very easy way. This also works if you use form validation and if you have multiple pages.
    I’ve posted the PHP script on my blog: http://markusbraindump.blogspot.com/2011/06/google-forms-survey-with-images.html

    – Markus

  20. Mamms says:

    Is there any way to put the Google Form fields in multiple columns and rows instead of just one long form that scrolls?

  21. Jo says:

    Is there a way to add a Captcha to an embedded Google Form?

  22. Gatch says:

    Great tutorial! Thanks a lot :)

  23. Elliot says:

    Wonderful tutorial! Any way to avoid conflicts when the page is put inside a jQuery accordion? I’m having trouble getting this to work at http://www.belovedfestival.com.

  24. Rach says:

    Thank you!
    We are using Google Forms to collect Conference Abstracts for a Graduate Student Organized Academic Conference. I needed a means to do document upload and collect contact information in a way that non-technophiles could access the information in a simple interface. Google somewhat solved the problem — but this tutorial helped so much.

    I combined your Google Form editing with “GoFileDrop” to enable a very nice means of getting all the abstracts and information into ways the rest of the Conference Committee can access. This requires no work from me — the website volunteer — which is perfect.

    Thanks again!

  25. Paul A. says:

    When using the custom redirect, it makes the form no longer check the required fields. Take out the redirect script and all works fine. Any thoughts?

  26. Kuhawaiian says:

    You guys rock, thanks for a great tutorial!

  27. B. says:

    All files and demos are down. Could you please reupload?

1300 559 343

02 66227649

PO Box 284
Strawberry Hills, NSW
AUSTRALIA 2012