How to style Google forms 117 Comments

01
December, 2008

Google Forms are amazing – so functional and flexible!

At Morning Copy we regularly use Google forms to run online promotions or surveys for our clients. Google forms are reliable, simple to use and, best of all, easy to share with all the stakeholders in an online project.

The one problem with Google Forms is that they look, well, like Google.

In this tutorial I’ll show you how to:

Don’t be scared of all the steps. I’ve broken it all down into bite size pieces so it is easier to follow. If you’ve already got a Google form ready to style you can skip straight to Step 6.

Step 1.

Sign up for a Google Docs account if you haven’t already done so.

Step 2.

Log into your new Google Docs account.

Step 3.

Click New and choose Form from the drop down menu.

Step 4.

Create your form using Google’s straight forward tools.

Step 5.

When you have finished compiling your form, click the link at the bottom of the page titled: ‘You can view the published form here’

Here’s an example of what it should look like:

http://spreadsheets.google.com/viewform?key=pqbhTz7PIHum_4qKEdbUWVg

Step 6.

Right click anywhere on the page and click View Source to look at the code behind the form.

Step 7.

Copy all the code between <form> and </form> tags and paste it into the new form page on your web site.

Click here for an example

Step 8.

Now you’re ready to style your form!

Insert your own stylesheet  between the <head> tags. I’ve prepared a version which takes Morning Copy website as it’s starting point.

Click here for an example

Step 9.

Now you have a beautifully styled form but it still sends users to an ugly Google confirmation page.

Add a bit of javascript* to redirect the completed page to a confirmation page** of your choosing:

REPLACE:

<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">

WITH: 

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://YOUR-THANK-YOU-PAGE-URL';}"></iframe>
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

* I found this last bit of code a few months back. I can’t for the life of me find the site so I can attribute it. If this is your code please contact me so I can give you the credit!

** The re-direct script will not work if you have required fields in your form.

Click here for our finished form!

Tutorial Updates

We’ve published 2 updates to this tutorial.

  • Learn how to add form validation and email verification to your styled Google Forms with our Google Forms and jQuery Validation tutorial.
  • Has your Google Form stopped working because of updates to the Google Forms source code? Check out our Google Forms Update post and find out how to fix this issue in seconds.

    • 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 FormSpring or Form Experts.

    117 Comments to “How to style Google forms”

    1. Dillon says:
      December 15, 2009 at 9:23 pm

      @Jerome I wrote this tutorial back in Dec ‘08 before Google added the multi page option.

      I am working on a big How to Style Google Forms redux post that will hopefully answer all the next-level queries that I have been receiving recently. Keep an eye out for it!

    2. Jo says:
      December 30, 2009 at 1:26 pm

      OK so I’m a bit of an html dummy but please humour me :-) I’m also using a CMS which gives me no control over anything on the page other than the central bit of editable content (I don’t get to see the tag for instance).

      I did have the form embedded using the link google docs gives you, but the confirmation page is not good enough, hence I found you!

      I can’t see anywhere in my google source code where I have . The only instance of <form at all is the line that says <form action=”http://spreadsheets.google.com … etc. If I use that it all goes into my CMS ok, and I can fiddle with the appearance, but if I click submit it doesn’t go anywhere – just the page I was trying to stick the form into but blank.

      Any suggestions would be much appreciated, but I don’t speak html like a native so please assume I won’t know what you are on about and treat accordingly!

      Thanks.

    3. Dillon says:
      December 30, 2009 at 3:37 pm

      @Jo I took a look at your page. Our deepest respect goes out to all the surf lifesavers!

      It looks like you have done everything right except for Step 9. Try replacing the form action with the code from the tutorial again. If you are still having problems click here to contact Morning Copy.

    4. Jo says:
      January 5, 2010 at 9:01 am

      Thanks for all your help Dillon – unfortunately even with all your tweaks our CMS seems to throw a spanner in the works so it doesn’t work on my site like it does on yours :-(
      It just gets stuck at the point where I submit it.

      Shame – looks like I’ll have to stick with the embedded version, but your service is excellent!

      Thanks again,

      Jo.

    5. harold says:
      February 18, 2010 at 11:24 pm

      love your insights using google forms on our own sites …

      i incorporated your ideas – only problem is that fields i identified as required do not function as required. on above URL the SUBMIT always goes to confirm page regardless of required aspect.

      is there a solution??

    6. Dillon says:
      February 18, 2010 at 11:43 pm

      @ Harold

      Unfortunately Google required fields don’t work with this solution. If you need required fields please check out our second Google Forms tutorial: How to add jQuery validation to Google Forms Best of luck!

    7. harold says:
      February 19, 2010 at 1:19 am

      thank you dillon …. appreciate the speed of response … will use the google confirm page and point from there to mine …. works well enough.

      thanks again.

    8. tabbara says:
      February 21, 2010 at 1:11 pm

      Thanks a lot, this got me out of a nuisance.
      Brillant !

    9. Jim says:
      February 23, 2010 at 4:22 pm

      I have two questions about step 7 (“Copy all the code between and tags and paste it into the new form page on your web site”):

      1) When I search the source code I do not find “”. I find only “”. Should I copy all the code between “” and “”?
      2) When you write “paste it into the new form page”, do you mean we should create a blank page and paste the code into that?

      Thanks in advance!
      Jim

    10. Dillon says:
      February 23, 2010 at 11:00 pm

      @ Tabbara I’m glad you found this useful!

      @ Jim You are exactly right on both counts.

    11. Kevin says:
      February 25, 2010 at 4:45 pm

      I’m trying to do a custom thank you page and validation as described here http://googlesystem.blogspot.com/2008/05/customize-google-docs-forms.html#comment-form.

      Everything seems to be working — the validation correctly shows an alert, the thank you script runs, and the form submits — but for some reason the data is not populating in the spreadsheet. I’ve actually taken out the script, and had the google thank-you page successfully pop up in the iframe, but no data. Did Google change something recently to prevent this from happening?

    12. Dillon says:
      February 26, 2010 at 12:41 am

      @ Kevin
      I’ve been pointed to problems with the Googlesystem tutorial by a few different people. I can only recommend that you use our tutorial instead. If you need field validation you can check out our Google Forms & jQuery Validation tutorial.

    13. Mark says:
      February 27, 2010 at 10:37 pm

      Dillion, sorry if this is redundant but I read all the comments and still can’t find answer.

      I’ve styled my form within a Google Site my creating a custom gadget. If I leave off Step 9, everything works perfectly and my spreadsheets update and notifications work when someone hits submit.

      But when I create my own confirmation code this process quits working. Am I using the code wrong or is this a function of Google Sites and my custom gadget?

      http://sites.google.com/a/ucampus.net/business/advertising

      Thanks for the help

    14. Mark says:
      February 27, 2010 at 10:48 pm

      …..I think I solved the problem. I used the link to the response page instead of the actual form URL.

      I’m still not sure how to get my confirmation page to open outside of the iFrame, but that would just be a bonus. Your site is wonderful, thanks.

    15. What is Google Forms? « Dave Worth says:
      March 5, 2010 at 6:21 pm

      [...] problem is that you are stuck with the Google styling, but there is a solution. Have a look at the tutorial at Morning Copy for more [...]

    16. Nathan says:
      March 15, 2010 at 4:39 am

      Hi, I have been following your tutorials to add a mailing list to my website, they have been extremely helpful and i have learned a lot.

      I am having difficulty getting my thank you page to load properly after I hit the submit button.

      http://nathandayfurniture.com.au/Nathan_Day_Furniture_and_Design/News/News.html

      Please feel free to check it out to gage what is going on. It is odd.

      The URL for the page I want to open is
      http://nathandayfurniture.com.au/Nathan_Day_Furniture_and_Design/Redirect.html

      I obviously want the thank you page to open in its own new window, but don’t know enough about this kind of thing to make it happen.

      The info submitted is storing to my google docs folder, so im sure I have that part right.

      Would greatly appreciate your help.

    17. Dillon says:
      March 15, 2010 at 4:52 am

      @ Nathan I’m glad you like the tutorials.

      It looks like you are using iWeb to build your pages. iWeb mislabels iframes as html snippets.

      This iWeb tutorial will show you how to insert the form code into iWeb built pages and solve your problem of the Thank you page opening in an iframe.

      If you need help with your email marketing you know who to call!

    3. 1
    4. 2
    5. 3

    Please leave a comment!

    © morning copy