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:

  • Style Google Forms so that they fit into your site’s look and feel.
  • Replace that dull Google confirmation page with your own custom ‘Thank you’ page.

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 3 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.
  • Third and final update. Our How to style Google Forms Redux post updates the original tutorials and adds a multi page Google Form.

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.

258 Responses to How to style Google Forms

  1. Jean Fayette says:

    Hey thanks for this – have been searching for ages for a way to do this.

    So many of the other tutorials didn’t make sense either – cheers for going to the effort with the examples.

    Jean Fayette.

  2. andrea says:

    any idea on how to work in form validation into google forms?

  3. Dillon says:

    @Andrea – Google don’t offer form validation at the moment.

    @Tom – I’m sorry the process didn’t work for you. You can easily add a link to the Google confirmation page without changing the code.

    Just click More actions > Edit confirmation
    Screenshot: http://www.morning.am/images/edit.png

    Add a link to the confirmation page.
    Screenshot: http://www.morning.am/images/edit-2.png

    Hope that helps.

  4. Tom says:

    Did Google change their code? I don’t see “” in the code. I tried to follow the instructions as they are laid out and it did not work for me – I got the same Google confirmation message.

    All I want to do is put a link in the confirmation message, even if it’s Googles tacky message. My standard link code does not work other Google fields and it works fine.

    Link Code:
    Your link text here!

  5. Tom says:

    Obviously the code works here too.
    I’m afraid to post the code again, I don’t know how to keep it from running.

    Sorry.

  6. Paul says:

    I’ve been looking for something to edit the appearance of my Google forms for a while as well. Next question: I need to process a payment after having the visitor use the google form via a google checkout button. I’m planning on putting the google chekout button on the confirmation page unless there is a better suggestion. Any ideas would be appreciated. Thanks for the great ideas so far.

  7. Paul says:

    Thanks for a great breakdown on how to change Google forms. Everything worked perfectly from your directions. I added a Google Checkout button to the reply page so my visitors can complete their online payment with their registration. If you wanted to take a look here’s a link. http://www.failure101.org

  8. Dillon says:

    No problem Paul, your form looks very slick.

  9. Adil says:

    smart and simple! thanks for the hint

  10. Kashif says:

    This is great. Will give this a try and lets see how it shows up ! Thanks for this tutorial.

  11. Kashif says:

    I tried this and it was simply great see here. Since I am using it on a blog so is there a way to show a confirmation message(text) that the form has been submitted or anything else that indicates that it has been successfully submitted ?

    Currently I have removed the link from the following statement :

    {window.location=’http://YOUR-WEBSITE/thankyou.html’;}

    And after I hit the submit button it loads the same current page with blank fields and also submits the form data to the spreadsheet. Your assistance is in this case is highly appreciated :D

  12. dale says:

    HI,,,,, played around with the method from http://googlesystem.blogspot.com/2008/05/customize-google-docs-forms.html
    when I saw your post. Having imbedded the styled form with no problems on firefox or safari…. it just didn’t work on IE. and so I have turned to you. Form’s working great but i just wish it had some validation. The google form will check (when required option is selected) for empty fields but nothing else,,, I also downloaded the response code and modified the .css as well….. problem is, google is somehow passing parameters to determine what entries to highlight when empty and when to reply thankyou. Does anyone out there understand how this is being done?

    thanks

  13. Kashif says:

    Sorry to have the third comment in a row but after not getting any other way to show a message, I created a post titled “Thank you” and then put URL of that post in the statement written in my previous comment.

    So this shows a Thank you(page) message to the user after (s)he has hit the submit button.

  14. Dillon says:

    @ Dale – It sounds like you have done better than me at getting validation to work. I tried the GoogleSystem tutorial with little luck.

    When I get a free moment I will definitely take a second look at validation because a lot of people are asking for it.

    @ Kashif - Nice work. Your form works a treat and looks very slick. I’ve updated my post to emphasise the fact that you can name your ‘thank you’ page anything you want.

  15. raza says:

    okay i got how how to change but where do i put that css styles?

  16. Dillon says:

    @Raza – Put the stylesheet between the head tags. The easiest way to find out how things work is to ‘View Source’ on the page and see how it’s built.

  17. raza says:

    Thanks A lot Man! i will ask you again if i have trouble it

    we Appreciate your post for being so helpful

  18. raza says:

    Sorry for bothering again, I am just wondering how I can decrease space between two fields. It looks ugly to have a big form for to collect little info

  19. Daniel says:

    Ive completed my form and thank you page. When submitting my form it does go to the thank you page. But it does not seem to update in the google spreadsheet. Do you know what I could be doing wrong? Any help would be appreciated.

  20. Dillon says:

    @Daniel – Make sure you have have correctly typed your Google spreadsheet as seen in Step 9.

  21. michele says:

    i’m trying to style my form, but i just don’t get step 9, where do i place the copied information?

  22. Dillon says:

    @Michele – Replace the original Google ‘form action’ code with the javascript redirect code in Step 9.

    The line of code you want to replace is in the first line after the body tag. Hope that helps!

  23. Allie says:

    Does anybody know if you can send an alert or an email to the owners of the form?

  24. Dillon says:

    @Allie – Click the Share tab in the top left.

    From the drop down choose Set Notifications.

    You can be notified whenever a user submits the form or have a daily list of submissions sent to you.

  25. Rachael says:

    Does anyone know why the redirect won’t work if using required fields? I’m trying to get these two things working together and any insight would be helpful. Thanks!

  26. linkwoman says:

    Is there a way to upload questions from a spreadsheet, to have google docs create survey for me?

  27. Dillon says:

    @Rachael. Unfortunately required fields won’t work because of the way the javascript handles the confirmation page redirection.

    I’ve written a new tutorial that will allow you to add your own required fields. Check it out here:
    Google Form with field validation and custom confirmation page

  28. Dillon says:

    @linkwoman I’m not aware of a way of uploading your questions from a spreadsheet. You should try adding them using the regular Google Forms creation tool.

    It’s really easy to use. Here’s a tutorial!

  29. Payne says:

    @linkwoman,

    Create a spreadsheet and put your questions in each column of row 1;

    Next, select Form | Create Form…and a form will pop-up with the questions from the spreadsheet.

    Note that with this method, all you get is the question without the answers, answer types, ie., true/false, text, etc..and you don’t get the ‘required’ indicator…

    But HEY, it save some typing…

    Payne

  30. The custom confirmation does not seem to work anymore. I have tried it three times.

  31. Dillon says:

    @Whane The Whip I’ve double-checked and the custom confirmation page still works.

    Here’s my working example again: Styled Google form with custom confirmation page.

    • ron says:

      Hi,

      How did you style the google form? Can you style the form to be much smaller and fit inside a content area that is 400px wide instead of the 1000 or so that google set the form to be?

      Thanks,
      Ron

      • Dillon says:

        The Google form is embedded on a self hosted web page. All the form elements are on your website, so you are not beholden to Google’s external stylesheet.

        • Ted says:

          Way up toward the top, you say: The Google form is embedded on a self hosted web page. All the form elements are on your website, so you are not beholden to Google’s external stylesheet.

          My question is this: the premise behind all of this is that this can only be done on self-hosted forms as opposed to simply the forms hosted by google on googleDrive. Right? What you’re effectively doing here is using their forms page as a kind of form builder you then take as your own and use elsewhere? This would only work this way, i.e. there is not a way to add these kinds of customizations to google-hosted forms, right?

          Your site, efforts and tutorials are excellent. I salute you.

  32. Hi Dillon, I was able to get it working after prodding around some more as you have seen in my summarized version.

    By the way, original attribution for the tutorial goes to UNL over at http://www1.unl.edu/wdn/wiki/Google_Document_Forms

    Comment edited by Morning Copy.

  33. Dillon says:

    @Whane. Thanks for summarising my tutorial on your site.

    The UNL link above is helpful for integrating a Google Form into your site with validation but it does not show you how to add a custom confirmation page.

    Sorry I had to edit the lengthy SEO section of your comment above.
    No disrespect intended – it was just off topic.

  34. Dan says:

    BAM!
    I love it.

    This works perfectly- thank you so much for the tutorial.

    I wish I knew what the “trick” with the iframe was all about though…

  35. tom says:

    Am I correct in thinking that I can’t do this on a Google Site page?
    http://www.google.com/support/forum/p/Google+Docs/thread?tid=0dc9e1bcd21c748d&hl=en

  36. Peter C says:

    hi all, can someone please please help. I have followed the process above to the letter, however after my page is submitted – my customized confirmation page (which is on my server), appears within an i-frame, which is the same size as my original form, Ultimately i would like it open in a new tab or window and not within the i frame – can anyone please advise. thanks a million

  37. Peter C says:

    sorry i should also clarify that i am using html snipets widget in iweb

  38. Morris says:

    Thought I would add that I recently used the Javacript from Step 9 to redirect a newsletter sign up form.

    The platform (Campaign Monitor) only allowed you to change the confirmation URL in the back-end, though for some reason IE browsers wouldn’t follow. The Javascript above worked perfectly for all browsers.

  39. Ari says:

    Thanks SO much for this solution – helps massively to create simple great forms!

    Any solution for if someone mistakenly hits submit without filling out all required forms?

  40. Dillon says:

    @ Ari Glad you like it!

    Check out our Google Forms with Validation Tutorial if you want required fields in your styled Google forms.

  41. Tiffany says:

    I need help. I’m attempting to use this step to accomplish the following:

    Once a visitor completes the form and hits submit:

    1. I receive notice of their data via Google Docs

    2. They are direct to google merchant to complete their payment.

    All that happens correctly now is one, can someone help?

  42. Dillon says:

    @Peter C Instead of pasting into iWeb’s HTML snippet (which is another name for an iframe) use this workaround to copy the code straight into the page.

    http://www.techtalkpoint.com/articles/insert-html-code-into-iweb-built-pages/

  43. Mike says:

    I was wondering if there was an easy way to make the confirmation page load normally, instead of inside the iframe? I’m not too familiar with javascript, or I’d be able to do a little more myself. Thanks.

  44. Leo says:

    Really basic question, does this work ok once it’s in a div box?
    I mean if i had a set width and height of a div box. Does it handle ok?

  45. Dillon says:

    @Mike The confirmation page should not load inside an iframe. Take a second look at the examples or post a link to your form.

    @Leo Yes, you can add any styling you like to the form.

  46. naomi says:

    Can someone help?
    My data doesn’t populate the fields in my spreadsheet after i apply the proper steps. What am I doing wrong?

  47. Dillon says:

    @Naomi

    I took a look at your form. Double check that your Google form response link matches the example in Step 5. Your form has “embedded=true” at the end of the link at the moment.

  48. naomi says:

    Grrr. How’d I miss that?

    Thank you!

    If that doesn’t work…

  49. naomi says:

    How much do I have to pay to get someone to check out my forms and make them work?

    I’ve come to the point where I can’t look at source code without a crying.

  50. Zynny says:

    Naomi,

    I am right there with you! I think the issue is that we both probably have required data, and the source code doesn’t work with required data- bummer! I totally missed that the first few times through!

    Any update on source code that will work with required fields?

    Z

  51. Zynny says:

    Ok… I took out all of my required sections.. reposted everything… it goes to my confirmation page…but nothing is actually submitted to my spreadsheet ;0) Ick!

    Anyone have any suggestions? Or I would be happy to pay you to fix it ;0) I need to get this up and running correctly ASAP.

    Zynny

  52. Dillon says:

    @ Naomi & Zynny

    I have emailed you both individually regarding your problems getting the form set up. We are happy to quote you for the hour or so work it should take to get you up and running.

  53. Zynny says:

    Morningcopy you are wonderful! It looks like Google documents was having a hiccup yesterday. Because, when I logged back in today, all of my “test” applications from yesterday were in my spreadsheet! All that panic for no reason!

    Here is the working form: http://valleysierrcamft.org I still have to work on the style template… but at least it stays true to my site and takes them where I want them to go!

    Miranda Palmer, MFT

  54. naomi says:

    Thanks for the help Dillon!

    I feel like a real wanker for missing that piece of information.

  55. Jeremy says:

    Hi,
    This site is great! I got my customized form and custom response page working in no time thanks to the above info!

    One interesting thing:
    After working great for a week my form stopped working last night all of a sudden. The form was not populating the database.

    It looks like Google may have changed slightly the code for the form and since my form was hardcopied onto my page instead of embedded the link to the spreadsheet broke.

    I compared the embedded code to my code and the below code just prior to the was missing. So I added it and my forms appear to be working again.

    Any body else have this happen?

  56. Jeremy says:

    Hmmm. My code snippet I pasted in above was removed. If anybody wants to see it I also posted in Google help forum:
    http://www.google.com/support/forum/p/Google+Docs/thread?tid=65872c5c82607664&hl=en

  57. Dillon says:

    @Jeremy Thank you for bringing this to my attention!

    It looks like Google made a slight change to their Google Forms code sometime on August 14th. The code change affects all forms that use the Google Forms Confirmation redirect solution in this tutorial.

    Don’t worry if your form is broken it should be easy for you to fix.

    Go into your form code and replace the:

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

    with:

    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">
    <input type="submit" name="submit" value="Submit">

    That’s it! I have fully tested this new version of the form and updated all the styled Google Form examples on Morning Copy.

    I will do my best to keep this tutorial up to date as Google Forms changes, so please let me know if you hit any problems with future updates.

  58. Sue says:

    Hi there, I, like so many others are having problems with google forms. I have followed the instructions on your site (which I thank you for) but on click the submit button I’m getting something like “sorry, You can’t view this form because it is published within a closed domain that you do not belong to.”

    I’ve tried taking off the field validation, but this didn’t work so I put it back on. I’ve no idea about coding and this is driving me mad.

    Any help would be brilliant.

  59. Dillon says:

    @Sue Unfortunately due to the nature of online tutorials people mostly only post a comment when they have a problem. I assure you, when followed properly this tutorial works :)

    I just took a look at your site and form. Here are my suggestions:

    1. Only copy the code that lives between the form tags. You have copied the whole page. That’s why you get that weird error message.

    2. Take out the field validation

    3. Make sure your post action matches my tutorial example.

  60. Sue says:

    Hi there….. it was me being slightly dumb I guess. What happened was that I didnn’t update the button to my form page, so I was being taken to the old form (which looked identical to the new version) so I didn;t realise. Now I’ve updated the link from the button everything works brilliantly…. YOU ARE A STAR!!! thank you so much.

  61. Sue says:

    A couple more things I’m trying to do is make the data entry fields wider….. I’m not sure what coding to look for and add a captcha to the form. Is there any advice you can give me.

    By the way, hope you don’t mind but I’ve added your URL to the forum page in Google Apps… there must be thousands of people still struggling with the forms issue.

    Thanks

  62. Dillon says:

    @Sue You can change the size of the date entry fields by adding extra padding to the CSS that controls that element. If you haven’t changed the code you cut and pasted from Google the styles you want to change will be grouped together as: input,select,textarea,option.

    I’m keen to find a Captcha-style solution for this form but I have no time at the moment! I’ll happily take suggestions if anyone has them.

  63. Sue says:

    Thank You for your time and patience

  64. Bob says:

    Using iWeb 09, I cannot get it to work like your sample does…here is the problem….
    In your finished sample, the thank you page changes the URL in the browser to the thank you page. This makes it easy to create a back button (different button for form page onClick=history.go(-1) and thank you page onClick=”history.go(-2)).

    However, in my web site, the thank you page appears in side the iframe where the form was, meaning the URL in the browser is unchanged. This makes a back button difficult, since it is the same button for both pages.

    I even copied the source from you example page, but it comes up with the same problem (thank you page appears in the iframe, not as a separate page). Any ideas?
    Thanks
    Bob

  65. Dillon says:

    @Bob

    I have seen this issue before. iWeb’s ‘HTML snippets’ are actually iframes in disguise.

    This tutorial will show you how to input the code in iWeb without using HTML snippets:
    http://www.techtalkpoint.com/articles/insert-html-code-into-iweb-built-pages/

    Good luck!

  66. Scott says:

    Now that google has been screwing around with the code, making it necessary to redo redirect code, could someone please re-issue a 1,2,3 list of things to do to implement the redirect and still collect data to a google form. Thanks! I had it working fine earlier this month and it seems that google has changed things more than once during the month of August. Hard to keep up.

  67. Dillon says:

    @Scott This tutorial still works. People who used it before the August update will have to add the additional code as explained in our Google Forms Update post.

    If you are following the tutorial for the first time or you want to re-do it from scratch, you should have no problem!

    I will keep this tutorial up-to-date for as long as people still find it useful.

    I have only noticed 1 change in August. If anyone spots a change please email Morning Copy or post a comment!

  68. Scott says:

    Well, for one, I no longer see this line of code when I first set up the page:

    The end of the above line has changed.

    But that change pertains to new forms I’m setting up. I started looking back here because I had two perfectly operating redirect pages that stopped working. (They still redirect, but the form no longer collects data.) This probably happened the same time Google did updates. I’ll probably try to do them over instead of trying to fix.

  69. Scott says:

    Sorry, the code that changed was the part ending in:

    YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK” method=”POST”>

  70. George says:

    I think I know the answer, but is there any way to retrieve data that would have been submitted after the August update? We were using this for a signup sheet for an event and are now missing all people who signed up between now and mid-August.

  71. Dillon says:

    @George Sorry I can’t give you a better answer but there is no way to retrieve those missing sign ups.

  72. Scott says:

    The code looks a lot different now, but I was able to get a redirect confirmation page going with the data still being captured. How do I show an example in this forum? The last time I tried to paste code into the forum, it didn’t take it.

  73. Dillon says:

    @Scott Paste a link to your live form rather than pasting code.

  74. Carlos says:

    I’ve been banging my head the last few days trying to work around Google docs and stylizing the form with CSS. I’m glad I found this page! My question is: Does Google allow this? I just read in the terms of service that you are not supposed to bypass the getting of this information. Does this count? Does anyone know if Google will terminate your account because of this? I work for a state agency in the US, so I need to be very careful.

    Thanks to you, Dillon, for keeping this page up so long!

    Carlos

  75. Dillon says:

    @Carlos Thanks, you’re most welcome!

    I don’t think Google will close your account for using this workaround but I can’t guarantee it.

  76. Eric says:

    I followed the tutorial and found that it did not work for me as-is in a google sites page when editing in HTML.
    The problem is in step 7.
    I believe this is due to the fact that google sites will not allow <script…>) tags.
    An easy workaround is to use the following without the script tag part is just to replace the <from… > part with the following:

    <form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post"
    onsubmit="parent.location='http://YOUR-THANK-YOU-PAGE-URL'">
  77. Rob says:

    Thanks – that was exactly what I was looking for !

  78. Thanks so much. At least. So I can use more and more Google Form for my customers. That’s so useful.
    Thanks again

  79. Daniel says:

    I have the form properly styled but the form does not automatically update when I change it via the edit function within google docs. I have been changing it manually through html. Is there a way that you can change/add questions from the google docs form edit feature and then it will update on the live form itself?

  80. Dillon says:

    @Daniel
    No, it won’t update automatically.

  81. Rui says:

    Hi,

    I have doing all the steps but when i submit data doesn’t appear in spreadsheet…

    Can you help me?

    tks in advance

  82. Dillon says:

    @Rui I can take a look at your form if you post up a link via comments or our Contact page.

  83. Rui says:

    @ Dillon here is the link to my form

    http://hugorib5.freehostia.com/form.html

    tks

  84. Dillon says:

    @Rui You have missed the very important Step 9 for confirmation page redirection. Also, you’ve left the stylesheet outside the head tags.

  85. n2ray says:

    Hello, thank you for your great text. Now i’m doing a form with pages, with your guide i can change the style of first page, but then i click next, it goes again back to google spreadsheets link. Is there any way can handle style with form that have page break?

  86. Dillon says:

    @n2ray I have used jQuery slide shows in the past to achieve this affect. It can get very tricky and time consuming so I don’t recommend it to people often.

    If anyone else has a better idea, please shout!

  87. Lukas says:

    Hi Dillon,

    I love your tutorial; it works beautifully! One question, though. I’m being forced to use a university’s CMS, which requires me to use a certain page template that I don’t have write access to. The portion of the template that I can edit begins after the body tag. Is there any way to reference the js outside of the head tags? using inline js (I know, I know) didn’t work when I tried it. Any thoughts?

  88. Lukas says:

    Whoops, meant to post that on the validation tutorial. Sorry about that…

  89. nsolent says:

    I like your code… I modified it slightly so the visitor would stay on-page after submitting the form. I used jQuery to replace the form

    onload="if(submitted) {$('.ss-form').html(' <h1>Thank you for submitting feedback. We appreciate it! </h1>');}"

    one note, i also copied google’s <div class=”ss-form”> before the <form …> so the whole form will be replaced with ‘thank you…’

  90. Dillon says:

    @Lukas You’ll need to call the JS between the head tags.

    @nsolent That looks really good! When I get a spare minute I will add your solution to the tutorial examples.

  91. Peggy says:

    Thank you SO MUCH for this! I’m using my university’s CMS system, and I was still able to make this work… I’m spreading the word.

  92. Dillon says:

    @Peggy No problem. Glad we could help!

  93. Curly Fries says:

    Hello there… I’m doing an invitation, so on my first page I have a yes/no question: if the answer given is ‘yes’ then they continue to another lot of questions, but if they respond ‘no’ then they are sent to a separate page that has a quick note on it and that is meant to be the end of it… but is it possible for me to add a second ‘submit’ on there? Otherwise they can still hit ‘continue’ and would also carry on to the end of the other questions in order to submit their form. Am I making any sense at all?!! Thank you if any of you can help :)

  94. Curly Fries says:

    ps… I think it’s not possible, so am happy to make a bit of a messy redirect for my guests, however they can’t skip the other branched page because there are required answers. Help?!

  95. Jesse says:

    Thanks for the help! However, doesn’t seem to work with Internet Explorer. I created a Google form, put it in iWeb html snippet, and on submission of the form, redirect back to another page which loads into my html snippet, basically got it working the way I had hoped. Works great on everything BUT Internet Explorer, can’t seem to find the problem to save my life. Also, I am using an image for the submit button, is this my problem?

    Here’s my iframe (html snippet) code

    var submitted=false;

    • Sean Feeney says:

      @Jesse the solution for IE is to not use an image for the submit button. You can use php conditionals to sniff for IE and only display non-image submit button for IE users.

  96. Dillon says:

    @Curly Fries I’ve built something like that for a client in the past. My solution involved putting the whole form in a segmented jQuery slideshow.

    It’s not too complicated. I’ll try and find the time to do a tute this Summer!

    @Jesse Your code didn’t come through. Can you post a link to your form?

    I always tell iWeb users to check out this tutorial about inserting html code into iWeb built pages because iframes don’t play well with this solution.

  97. Jerome says:

    Hi,

    I created a google form with multiple pages which I later add to iWeb pages.
    The problem is that when you submit the form the information in the previous pages gets lost.
    Is there a way to link the pages together so that the information they contain doesn’t get lost?

    Thanks for you help.

  98. Dillon says:

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

  99. Jo says:

    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.

  100. Dillon says:

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

  101. Jo says:

    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.

  102. harold says:

    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??

  103. harold says:

    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.

  104. tabbara says:

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

  105. Jim says:

    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

  106. Dillon says:

    @ Tabbara I’m glad you found this useful!

    @ Jim You are exactly right on both counts.

  107. Kevin says:

    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?

    • Dillon says:

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

  108. Mark says:

    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

  109. Mark says:

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

  110. [...] 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 [...]

  111. Nathan says:

    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.

    • Dillon says:

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

  112. Felero says:

    Hey, I’m trying to get this to work with my site, however the boxes/alignment (the css basically) disappears. I couldn’t figure out how to get past step 7.. My apologies if I’m going about this incorrectly. The page can be found Here

    • Dillon says:

      @Felero

      You are losing the CSS because you have not called in an external style sheet. Just add a few rules to your site’s stylesheet for the labels and inputs.

      I also noticed that you have some required fields in your form. I’m afraid this solution won’t work if you use required fields. Check out our Google Forms and jQuery tutorial if you need required fields in your form.

  113. Jose Salviati says:

    I am working on customizing the google confirmation page and get this error after pasting the HTML code into a new page.

    Request Error (invalid_request)

    Your request could not be processed. Request could not be handled
    This could be caused by a misconfiguration, or possibly a malformed request.

    For assistance, contact your network support team.

    If I shorten the code (I have about 12 questions in the form) it works fine. I can add a style sheet and call a unique page on confirmation. But, if I leave all my questions I get that error. ANY assistance is greatly appreciated!

    Jose

    • Dillon says:

      @Jose
      Weird. I’ve never had a problem with too many questions before. Send me a link to your form and I’ll take a look.

  114. Eric says:

    Fantastic! It was simple to do and easy to embed. Thank you for your help.

  115. Christine says:

    Maybe I’m missing something, but I’m not seeing the tags in the source data. Can you tell me what I should be using as the code?

    http://spreadsheets.google.com/viewform?formkey=dFgxeFJVOGpocEtUZW96TENXWV82anc6MQ

  116. Christine says:

    Ok.. It works by selecting the entire code. But the responses are not showing up in google docs. My reason for the needed to use the code vs the embed option is to redirect the “submit” button to my own page.

  117. Dillon says:

    @Eric You’re welcome!

    @Christine It’s probably just a small problem with your code. Please post a link to your embedded Google Form and I’ll take a look for you.

  118. Harpik says:

    Nice work, but you forget of encoding which is normaly in meta tag, if anyone has problems with eg polish special characters “zażółć żółtą jaźń” (polskie znaki w formularzu google) just add accept-charset=”UTF-8″ in form tag so at the end beggining of form will look like:

    var submitted=false;

  119. I don’t know if anyone mentioned this. But, if you copy your link from your google form page, make sure to remove “&ifq” from the end of it. If you don’t, Internet Explorer will not post the data to your google spreadsheet when the form is submitted.

  120. Dillon says:

    @Harpik & Phillip

    Two good tips!

    For anyone interested, we’ve just added an update version of this post: How to style Google Forms: Redux

  121. Daphne says:

    I am trying to create a simple one page feedback form and re-direct the thank you page. I found your tutorial and seems like everyone can follow except me. :(

    This is the link to view the form
    http://spreadsheets.google.com/viewform?formkey=dHFxc0M0NnpRX0tfQ09yZ0loVHUtbVE6MQ

    This is the link after I follow your instruction to step 7. The HTML code looks OK under preview. Once I saved it, it only show half of the form in firefox and it will not display anything under IE7.

    http://sites.google.com/site/kcitsurvey/

    If I shorten the questions to fit into iframe then I can have the form displayed, What did I do wrong? I have tried several different ways to fix it and none works. Please help.

    Daphne

  122. Dillon says:

    @Daphne

    We’ve had a few inquiries about Google Sites before. Unfortunately, when you try to insert code it is placed in an iFrame rather than right into the page you are editing. Similar to the iWeb issue above.

    According to reports (I’ve not used the platform myself) Google Sites also ‘strips’ certain elements from code so you are going to have problems using this solution on you Google site I’m afraid.

  123. Daphne says:

    Thank you very much for your fast respond. Now I know why I had trouble using Google Sites.
    I went out and found the Microsoft small ofiice site and tried your code again. This time, I E is able to show the whole form and post data to Google spreadsheet. However, it will not redirect Google thank you page.

    http://kc-it.web.officelive.com/default.aspx

    I read someone said ‘unload’ within ‘iframe’ is no longer supported. Is that true? Anything I can use to replace it? Does Microsoft sites also strips certain elements like Google?

    I also tested the site with firefox and it won’t even display the content. That’s odd..

    Anyway, thank you for any help you can provide. I am really appreciated.

  124. Dillon says:

    @Daphne

    I’m looking at your Microsoft page with FF and I can’t see any trace of the Google Form. It’s probably a similar situation to your Google Site.

    If you’re looking for an easy CMS solution, I recommend WordPress.

  125. Zsolt says:

    Is there any way to reduce the space between the fields?
    I would like to put in the side bar my contact form and get the confirmation page in same place in small box. Is that possible?

  126. Zsolt says:

    and how can move the entered data to the thank zou page for last check<

  127. Jeffrey says:

    Awsome! I really need this right now. Thanks for sharing it, and thanks to Google, too.

  128. Irene Sutton says:

    Thank you so much for these tips, excellent

  129. Karsten says:

    Hi,

    I have a problem with this form. I dont get any “” code at all. My code for embed looks like this:

    Loading…

    Nothing else, just this short one.

    Am I missing something, or has google changed anything lately (last comment from 22nd may, so I guess not).

    /Karsten

  130. Karsten says:

    ah, cant post html code in the comment field I see.

    Replaced with [ and ].

    I cannot find the code:
    [form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST"]
    in my embed.

    All i have is:
    [iframe src="https://spreadsheets1.google.com/embeddedform?formkey=dGdnRjEtUTB6YzRBTVY1Yk43YkVZRHc6MQ" width="760" height="1260" frameborder="0" marginheight="0" marginwidth="0"]Loading…[/iframe]

    Nothing else.

    Am I missing something, or has google changed anything lately (last comment from 22nd may, so I guess not).

  131. Dillon says:

    @Karsten

    I’m not sure what the problem is. Can you send a link to your form and let us know if you are using a specialised web publishing platforms such as iWeb or Google Sites?

    @Everyone you can add HTML to your comment by wrapping <pre> tags around the code.

  132. Karsten says:

    The form: https://spreadsheets1.google.com/viewform?hl=en&formkey=dGdnRjEtUTB6YzRBTVY1Yk43YkVZRHc6MQ#gid=0

    Using a wp theme, nothing special as far as I can see. the site is http://www.cafeskolan.se/?page_id=36

    is that the information you wanted? :)

    • Dillon says:

      The problem is that you are pulling the form into your page with an iframe. You need to embed the code using the instructions above. The easiest way to do this in WordPress would be to hard code the form elements into a new custom page template.

      It’s not too difficult. Here’s a good tutorial on how to create a custom page template for WordPress. If you get stuck, hit us on the Contact page and we can quote you for the small job.

      • Ari says:

        Dillon – Thanks so much!! I’ve created a custom WordPress template and just dropped all my code in there (instead of the ‘loop’ area) and it works like a charm.

        I was so frustrated not being able to use the custom redirect technique (ala iframe) in WordPress.

  133. Karsten says:

    Thank you! had completely missed the part about taking the source code! I have however not gotten it to work properly, it shows the target=”hidden_iframe” onsubmit=”submitted=true;”> code on the site, so something is not completyl right, and the submit does not work.

    I am still trying around with it, but starting to give up maybe it just isnt menat to be ;)

  134. itDm says:

    I don’t like Iframes much so I used some Jquery to post the form to google docs.

    Use the following function

    function PostContactForm() {
    $.post(“https://spreadsheets.google.com/formResponse?formkey=PUT-YOUR-GOOGLE-FORM-KEY-HERE”, $(“#PUT-YOUR-HTML-FORM-ID-HERE”).serialize(),
    function () {
    document.location.href = “PUT-YOUR-CONFIRMATION-URL-HERE”;
    }
    );
    }

    Replace the submit button on the form with

    You will need to reference the Jquery library also.

    • Dillon says:

      Cool solution. We lost most of the code. Can you re-post the code between pre tags?

    • Dillon says:

      I tried this idea out. Did you get it to work with Internet Explorer?

      I get an access denied javascript error for the jquery. It’s because IE won’t let jquery post data cross-domain (your domain to Google Forms).

  135. itDm says:

    Sorry about that.

    The submit button needs to call the jquery function instead of posting the form directly:

    Add an onclick event to the input control and call the PostContactForm() function

    onclick=”PostContactForm()”

    change the type from submit to button

    type=”button”

    the Jquery library can be found here:

    http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

  136. JAY says:

    Is this article likely to be revised because Google’s new Forms don’t have the same structure. For example the step 9 stuff is slightly different.

    Thank you.

  137. Tom Atanasow says:

    Awesome!!!!

    This is brilliant!!! Thanks guys!

  138. Gary Hughes says:

    Thanks a lot for this – I was looking around for a form builder and got way more than I set out to find. The Google Spreadsheet integration is wonderful and being able to customise the feel makes things oh so much better :).

  139. Dillon,

    just want to say, YOU ROCK. what a great post. very helpful.

    i couldn’t help but notice there have been over 3,000 people who’ve filled in your test form. LOL… very, very cool!

    keep up the great work,
    D

  140. Dusan Vrban says:

    Nice and useful. Perhaps an useful addition. Try FireBug with this, since you can easily customize the form “live”.

  141. Andrew says:

    Howdy, there’s a strong chance that I’m being dense here but when I view the source on this form:

    https://spreadsheets.google.com/viewform?formkey=dGJjNFZfRFlxOXh2WDRaZkJnOF9jWVE6MQ

    I don’t get a section. Am I making a really basic error?

    • Dillon says:

      Sorry, I think the comment form stripped out the HTML tag from the last line of your comment. Did you mean HEAD section?

      • Andrew says:

        Huh, weird – no I actually meant a FORM section – I’ve got a FORM ACTION tag, do I copy from there? I’ll try that and maybe just cry if it doesn’t work.

        Cool tutorial btw, thanks for’t.

        Also purlease enable subscription for comments :)

  142. Sue says:

    i opened the source code, but i cant edit it. what should i do just can edit the source code? Thanks.

  143. Sue says:

    May i know the step cleary for replace that Google confirmation page with our own custom ‘Thank you’ page? i’m not sure that i have miss some step…

  144. najeem says:

    love this post! helped me a lot. thanks!!

  145. Dillon says:

    Replace Google’s form action with the code in Step 9. If you get stuck, send us a link to your form and we can take a look.

  146. Team Roster says:

    You you should edit the post subject How to style Google Forms | Morning Copy to something more catching for your content you write. I enjoyed the blog post still.

  147. Stephen says:

    Very cool. This helped me out with that stupid response form.

  148. Muffythechef says:

    I followed Step 9, but I keep getting the same error message when I try to Save the page after the changes : Your HTML either contains unsafe tags (iframe, embed, styles, script) or extra attributes. They will be removed when the page is viewed.

    Help! How and where can I send you my form to have a look? Which link do you need?

    • Dillon says:

      What program is giving you those error messages. Are you pasting the code into a content management system?

      • Muffythechef says:

        I am using the Google sites admin tool. sites.google.com

        What I have done was to go to “Create Page”, then I clicked on the “html” button to paste the code, and when I clicked on “save”, I got this error message.

        • Dillon says:

          Yep, that’s the problem. Some ‘site builders’ like Google Sites won’t allow javascript or iframe content. You can insert custom gadgets in Google Sites to get around this. Check out this link for more info.

  149. ThomasDC says:

    Hello, I have the problem that people who use my form with internet explorer don’t get in my google docs excel…. please help.

    http://heslog.guava.be/registreertest.html

    Thanks a lot

    • Dillon says:

      You are missing these vital elements from your form.

      <input type="hidden" name="pageNumber" value="0"> 
      <input type="hidden" name="backupCache" value="">
      <input type="submit" name="submit" value="Submit"></form>
  150. Dillion says:

    Hi Dillon,

    Thanks for the tutorial…You are correct in saying that people only post when they have problems which forced me to post this:

    The post works! I just tried it and it worked.

    Cheers

  151. mo7 says:

    This was awsome, I edited the form , added some validation and I even added paypal so ppl can pay after submiting (some data entered in the form is carried forward to paypal). it worked gr8
    Thank you !!

  152. Matt says:

    THIS DOES NOT WORK IN A GOOGLE APPS FORM ID! Only Google Forms. This means you have to take out the /a/domain… I have been working on trying to find out what was wrong with my html for 4 hours +!!! After painful debugging I finally found it out (of course the last thing I had left to try).
    http://www.google.com/support/forum/p/Google+Docs/thread?tid=2ee4b3ddf31e58fd&hl=en&fid=2ee4b3ddf31e58fd000497fbd28a6179

  153. John says:

    Thanks for an excellent tutorial. To get everything working in a Google Site page, I had to make my own gadget. That’s not too hard if you use google gadget editor. This url describes how: http://www.mydigitallife.info/2010/02/03/how-to-add-javascript-or-custom-contents-to-google-sites-with-gadget/

  154. Elizabeth says:

    I can’t find the <form> and </form> tags in Step 7 – can someone send a screen shot or sample of where it might be or direct me to what line please. :)

    THANKS.

    This is awesome.

  155. Danny says:

    Excellent! … I’ve already finish my tests, It works! … I’m working on the desing now! Greetings from Peru

  156. james says:

    that was a BEAR ! but finally figured it out !
    the thank you page – lands into the same area of the html form… e viva

    one question –
    if i press submit – by mistake – or with out filling out anything – it triggers
    and goes to thankyou page – not directing anything to my spread sheet?
    is there a way this can be controled? not to let the submit button go with out entering any fields !

    thanks for the big help already

    cheers

    james

  157. jackpot says:

    This works, I love it. One question: has anyone ever gotten any flack from Google about breaking the TOS? Because I asked about this on Google’s forums, and the consensus seems to be that both of these methods (stripping out the form html and using the javascript redirect) are against the rules. I can’t risk building a client’s contact form using this, because I can’t risk having their account suspended, but man would I like to.

    • Dillon says:

      I would strongly advise against using this tutorial for building commercial sites. This solution is strictly for hobbyists.

      Contact us for a quote if you want a professional contact form/survey form solution similar to Google Forms.

  158. VISTAKNIGHT says:

    Hi,

    Just used your code… work brilliantly! Thanks…

    I also used http://www.spiderweblogic.com/HTML-Tag-Generator.aspx to edit the positioning of the fields add images etc.

    My site is under construction but you can visit where is used google docs http://www.vistaknight.com/request-a-quote

    I can go through the process if anyone wants to have something similar…

    I thought i would have to pay for something like this!!

  159. Charlie says:

    Thank you so much – been trying to do this for hours straight and here is the only solution that is easy enough to follow :)

  160. Wayne says:

    I can’t seem to be able to apply this method of formatting the Form when it is used in a Google Sites page.

    does anyone have an example of being able to do this?

  161. James says:

    I got the code working on firefox for my form at: http://bizzlebuzz.com/scholarship
    However, it does not work with chrome or safari??? I have not tested IE yet…
    Any insights would be greatly appreciated!

    Thanks for the tutorial.

  162. [...] blog MorningCopy has a great tutorial on getting started with Google Forms which I reference below for this whole step. Click here to follow along with their tutorial as I [...]

  163. Iciar says:

    Hi,

    Validations works and it’s awesome.

    I would like to make thinks more complicate it, I would like the thanks page to pop up in a window and be able to close it after seeing the message.

    Any idea how to apply this to the code explaining in this site?

    Many thanks

    • Dillon says:

      @Iciar No problem. Just have to replace the onload value from window.location

      onload="if(submitted){window.location='http://www.morning.am/tutorial/thankyou.html';}"

      to window.open

      onload="if(submitted)window.open('http://www.morning.am/tutorial/thankyou-close.html','mywindow','width=600,height=300')"

      Here is a quick example of a styled Google Form with confirmation page opening in a new window.

      If you have any trouble please contact Morning Copy and we can create a bespoke solution for you that ticks all the boxes.

      • Iciar says:

        Many thanks for your help @Dillon, I really appreciate it.

        I’m afraid that it didn’t work, neither the link styled Google Form with confirmation page opening in a new window.

        Any idea?

        Once again many thanks for your time

  164. Adam says:

    Hi.

    I’m having a slight problem with the redirect.
    After hitting submit, it does redirect, but in the frame of the form, on the same page.
    Is there some way I can get it to redirect to the actual page?

    Feel free to go to the link for the form:
    http://lancasterpubliceducationfoundation.org/Registration.html

    I just recently created it and don’t expect any responses, so feel free to “submit” as many times as you need to figure out my problem.

    Thanks

    • Dillon says:

      @Adam It looks like you are using iWeb to build your site. Check out the comments up thread to see how you can fix your iframe issue.

      • Adam says:

        I went to the site and downloaded the iWebMore application, but it suddenly shuts down as soon as I open it. I noticed the guy who made it said it should only be used on iWeb 1 (with iLife ’06 and ’08). I have iLife ’11, which means I have iWeb 2. He basically says there’s no need for his application because it HTML snippets do “about the same thing as iWebMore.”
        I guess he didn’t get the memo about them being just like an iframe.
        Does this mean I’m stuck?

  165. jd says:

    I am having trouble with the Confirmation Page. When I am logged into Google and my spreadsheet is open, my Confirmation Page attached to my form is working perfectly. However, when I am NOT logged into Google, and a user hits the Submit button on my form, it redirects them to the log in page for my Google account. I do not see this comment posted in any of the other comments so I thought I would cross my fingers and give you a shout. I hope you have heard of this before and have a quick fix. THANKS!

    • Dillon says:

      We will take a look if you post a link to the form.

      • jd says:

        thank you. you can find the form at: http://www.purplemonkeyapps.com/form2.html

        The confirmation page works perfectly when I am logged into the corresponding spreadsheet with my browser. However, when I am not logged into my GoogleDocs spreadsheet, the confirmation page does not work, but rather throws me back to the log in page for some strange reason.

        I appreciate you testing it for me, however, you will not know whether or not I have the spreadsheet open unless we coordinate times so I can log in (and out) to show you this issue. (Which I would be very happy to do, by the way!)

        thanks again!!!

        • Dillon says:

          It’s not working because you are using Google Apps. Here’s a workaround that should fix the problem.

          • jd says:

            ugh! I am still missing something! I removed the /a/purplemonkeyapps.com/ but no success. It is still only working when I am on the same computer as I am simultaneously logged into the spreadsheet. The push to confirmation page is fine, but it will only write the form info to my spreadsheet when logged into the spreadsheet.

            I also tried:

            and

            and

            and

            thanks so much for your efforts!! :)

          • jd says:

            ooops, my html was removed. but basically, still not working as per my earlier explanation.

          • Travis says:

            The workaround in the URL only works if you uncheck “Require Integrity Designs sign-in to view this form” when creating or editing your form. Unchecking this allows for your form to be submitted to your spreadsheet without you having to be logged in. Hope this helps!

            Here’s a screenshot of how your form checkboxes should look:

            https://skitch.com/iamtravjohnson/8iq3b/edit-form-integrity-designs-contact-form-google-docs

          • Travis says:

            I neglected to edit out my Google Apps name in my previous response.

            I’m sure it goes without saying, but the text for the field on your form will read whatever your Google Apps name is.

            For example, you’ll want to uncheck the following form field when creating or editing your form: “Require YOUR GOOGLE APPS NAME HERE” sign-in to view this form”.

            Hope this helps!

  166. jd says:

    Since the root of my problem was the fact that I was using Apps for Biz, I simply created a new form with a standard Gmail account and used your most excellent instructions from above. No more Apps for me…. no more problems! THANKS! You folks were very helpful!

  167. Adam says:

    I went to the site and downloaded the iWebMore application, but it suddenly shuts down as soon as I open it. I noticed the guy who made it said it should only be used on iWeb 1 (with iLife ’06 and ’08). I have iLife ’11, which means I have a later version of iWeb. He basically says there’s no need for his application because it HTML snippets do “about the same thing as iWebMore.”
    I guess he didn’t get the memo about them being just like an iframe.
    Does this mean I’m stuck?

  168. raman says:

    hmmm… there is no tag in the source code……..i think this trick is outdated..

  169. Elisa says:

    My when I do the a custom confirmation page, it does it in an iframe, which is fine, but then I can’t link back to the same page without making it stay in the iframe. Help. Thanks

  170. BlueRoots says:

    Is this trick broken now? I’ve been using it for some time and all of a sudden the spreadsheet doesn’t receive the submissions. No errors, the form submits like it should, but nothing in Google Docs. HELP!!!

  171. Austin says:

    I followed all the steps, and the redirect works fine, but my spreadsheet isn’t getting the submissions. Any help would be appreciated.

    Here’s a link to the page:

    http://spillerfurniture.com/Survey.htm

  172. Todd Dow says:

    Folks, this is a great site and this particular post is extremely valuable. Thanks a ton for your help on getting verification and redirection working. MorningCopy, you mentioned that verification & redirection can’t work together on a page. Actually, they can. The code that you provided works like a charm – once you clean it up. Here’s the deal:

    Quotes can mess you up when you cut and paste. Make sure that you are using the right quotes: When I copied the code from this site, different quotes ended up in my code. I had to replace them with the regular quotes (single & double, where required). Not sure of the exact terminology to use here, but, that did the trick.

    It works like a charm. Thanks a ton!

    Todd

  173. Anis says:

    Hi all,
    This workaround worked very well for me locally…i.e. the redirect takes me to the URL i specified however it doesn’t work when I plug it in my site
    https://sites.google.com/a/tayp.org/website/baner/register

    2 issues mainly:
    1. No scroll bar apparears (have to hit TAB to test it for the time being
    2. No redirect….

    Your help would be greatly appreciated!!

    Thanks!

    Anis

  174. Kenny says:

    Dillon, this is fantastic work and easy to implement. Had it up and working in a few minutes.

    I’m not a javascript guy, but is there anything else I can pass to the if(submitted) function? Perhaps a simple javascript alert window that says “Thanks, got your info.”? I gave it a shot, but couldn’t get anything working.

    Or a lightbox pop-over? I’d love to keep them on the page and not navigate away.

    Thanks again for the write-up!

  175. Kelley says:

    Dillon,
    I am so confused….I saw on some site where someone using google had a pretty pink comment box. I don’t understand code.

    I don’t understand how to change the way the box looks, how to get rid of all the extra space between lines for example.

    It all makes my head hurt.

    I’ve been searching for the idiots guide to changing forms…can’t seem to find it. Your 9 steps leave me baffled.

    I don’t know what to look for to change. I’m lost! HELP…if you can. If you write back and say look above, well I’ve been looking for awhile and still can’t find the idiots section.

    Thanks,
    Kelley

  176. Natasha says:

    This is just what I was looking for. It works well! :o) Thanks!

  177. AG says:

    Hi,

    Is there a way to change the link to the form into a friendly URL? For instance, instead of the large amount of text in the link that is provided at the bottom of the form when editing, can I turn that link into a user-friendly link (one or two words)?

    Thanks!

  178. Mamms says:

    Just a head’s up you have a broken link at the bottom of this webpage for the update:

    Link text: Google Forms Update
    LINK: http://www.morning.am/google-forms-update/

    Error message: Oops, this page is missing!

    It says around the link: 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.

    Question: Is this info still needed and it that why the link breaks OR do I still need this info to make this all work with Google’s current updates?

    Thanks

  179. John Thomas Mayer says:

    Hi, does anybody know how to implement this in forms with several pages?

    When I hit the “Next Page” button, it redirects me to the “Thanks for completing our survey” page, instead of the next page.

    Thanks!

  180. Thomas Mayer Johnson says:

    Hi, does anybody know how to implement this in forms with several pages?

    When I hit the “Next Page” button, it redirects me to the “Thanks for completing our survey” page, instead of the next page.

    Thanks!

  181. Marty says:

    This is how I got around it using jQuery and a hidden iframe. Just place the iframe somewhere in your document (i did just under the body tag) and stick the javascript at the bottom. It basically adds the attributes to the form as in the original and processes the whole thing with jquery. I used this in a wordpress setup an the form itself is pulled out from the_content() so I needed to add the attr’s at runtime….

    Add into body somewhere:

    [code][/code]

    Add this jquery at the bottom:

    [code]
    jQuery(document).ready(function($){

    var submitted = false;
    $('#ss-form').attr({
    target: function(){ return 'hidden_target'; },
    onSubmit: function(){ return 'submitted=true'; }
    });

    });
    [/code]

  182. Daniel says:

    I really want my submit button to work like this http://googlesystem.blogspot.com/2008/05/customize-google-docs-forms.html

    I want it to stay on the page, but I’ve had some difficulty. Here is my code so far:

    var submitted=false;

  183. jack says:

    All of a sudden my code to take you to a new page is being overridden. It’s worked for weeks previous to this and I didn’t change anything. Anybody know of any google updates that might have caused this?

  184. Lucy says:

    I’m trying to customise a form so that it carries out some calculations in javascript before it’s submitted.

    The calculations work fine but I’m trying to insert their results into the elements which will be submitted. Because of Google’s stupid naming system: entry.1.single which includes full stops in elements I’m not sure what to do.

    Can I rewrite this to take the full stops into account?

    document.ofrm.entry.3.single.value = dm(eval(TotA));

    or can I use the element id to insert the calculated value? or can I change the element name but still get it into the right field in the Google spreadsheet?

    Any help greatly appreciated!! Thanks.

  185. Ben says:

    Any idea how to do Step 9 when embedding the form in a facebook page?

  186. CB says:

    I am having trouble finding “” on my form: https://docs.google.com/spreadsheet/viewform?formkey=dGlIcFpPM1dQbm5QN2hOTXZ3Q3VEamc6MQ

    If you should show me a screenshot of where it is, I would be very appreciative!

  187. CB says:

    For some reason it didn’t show up. I am having trouble finding

  188. Bryt says:

    I came to find out how to create the thank you page, rather than the ugly page google has. The code worked wonders, so much better looking now. thank you!!!

  189. Stephon says:

    Can you add any Jquery plug in to show the user that the form was submitted without taking them to a confirmation page? Can the user stay on the same page?

    • Matt says:

      Hey Stephon, yes, I just tried it. I used the jQuery UI dialog() method. When the user submits the form, a Lightbox dialog pops up with the confirmation message. You could then target the Form Id’s and clear the fields. Let me know if you have questions.

  190. Brian says:

    Thanks, this works perfect! I have tried for few days and finally got this!

  191. CKIDOW says:

    By the way… the correct url now should be:

    http://spreadsheets.google.com/formResponse?formkey=

    and just put your formID at the end without “embed…” parameter.

    Cheers

  192. dannythetrojan says:

    is there a way to put 2 fields on the same line?

  193. Paul A. says:

    Has anyone else experienced that when you add the custom redirect….

    var submitted=false;

    ….it makes the required field validation not checked?

    With this snippet in place, the data is written to the spreadsheet without regard to *required* fields. Remove the snippet and the *required fields* are checked.

    Anyone have a solution or fix?

  194. Jacqui says:

    I am using Google form to survey residents of a small town. We would like to add images to the survey and this seems to be the best way to do it. Thank you for this tutorial! My question is this: Google tallies results for you via spreadsheet. With this method how do we get the results?

  195. Ms Pauline says:

    The re-direct script actually works with required fields in Google form (I’ve tested this on our site)– not sure why but it might be because we’re using a WordPress site. =/

  196. Christian H says:

    This doesn’t appear to work with the new Google Docs/Drive integration. How do we get the formkey cause now the links are docs.google.com

  197. Dalinda says:

    Is there a way to redirect to a clear “blank” form instead of a thank you page once the user hits submit?

  198. Piet says:

    You can replace the javascript google by this one:

    jQuery(function(){
    $(‘body’).on(‘submit’,’#ss-form’,function(e){
    var form = $(‘#ss-form’);
    var empty = [];
    form.find(‘input[type=text]‘).each(function(){
    if( $(this).val().length == 0){
    $(this).parents(‘.errorbox-good’).addClass(‘errorbox-bad’);
    empty.push($(this));
    }
    });
    if(empty.length != 0) {
    e.preventDefault();
    return false;

    }
    });
    });

    and create a CSS style .errorbox-bad

  199. Danielle says:

    Hello, I have a question.

    At our company we use a Google Form for the Project Managers to submit requests for QA. Is there any way that they could get confirmation of what they submitted?

    Thank you!

  200. David says:

    I know it’s a simple thing, but not being the worlds best coder, it took me a while to figure out how to bust it out of the iframe. To do this I changed window.location to window.top.location:

    onload=”if(submitted){window.location=’http://www.morningcopy.com.au/tutorial/redux/thankyou.html’;}”

    to

    onload=”if(submitted){window.top.location=’http://www.morningcopy.com.au/tutorial/redux/thankyou.html’;}”

    Other that it worked great!! thanks!

Leave a comment

1300 559 343

+61 2 8007 3511

PO Box 284
Strawberry Hills, NSW
AUSTRALIA 2012