How to style Google Forms
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.
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.
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.
Still stuck?
If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like FormStack.
Recent Posts
- Brand new website for Tranquil Water
- Fig & Cherry food blog gets a makeover
- Need a desk in Surry Hills? Share our space!
- New client: CPS Property
- How to style Google Forms: Redux
Popular Posts
- 153How to style Google Forms
- 48Google Forms and jQuery Validation
- 24How to style Google Forms: Redux
- 14Google Forms Update
- 5Email Marketing
We're Social!
Subscribe
© morning copy | Terms & Conditions | Privacy Policy | Sitemap
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.
any idea on how to work in form validation into google forms?
@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.morningcopy.com.au/images/edit.png
Add a link to the confirmation page.
Screenshot: http://www.morningcopy.com.au/images/edit-2.png
Hope that helps.
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!
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.
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.
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
No problem Paul, your form looks very slick.
smart and simple! thanks for the hint
This is great. Will give this a try and lets see how it shows up ! Thanks for this tutorial.
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
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
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.
@ 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.
okay i got how how to change but where do i put that css styles?
@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.
Thanks A lot Man! i will ask you again if i have trouble it
we Appreciate your post for being so helpful
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
[...] How to style Google forms [...]
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.
@Daniel – Make sure you have have correctly typed your Google spreadsheet as seen in Step 9.
i’m trying to style my form, but i just don’t get step 9, where do i place the copied information?
@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!
Does anybody know if you can send an alert or an email to the owners of the form?
@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.
Hi, I just don’t see the share button.
By the way, I have successfully redirect the form to another page.
However, it doesn’t seem that this form does not add to the Spreadsheet or invoke the script I wrote. – which sends an email to the person administering the site.
Here is the url:
http://sites.google.com/site/call2caring/gateway-8
Thank you for your time. John.
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!
Is there a way to upload questions from a spreadsheet, to have google docs create survey for me?
@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
@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!
@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
The custom confirmation does not seem to work anymore. I have tried it three times.
@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.
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
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.
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.
@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.
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…
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
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
sorry i should also clarify that i am using html snipets widget in iweb
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.
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?
@ Ari Glad you like it!
Check out our Google Forms with Validation Tutorial if you want required fields in your styled Google forms.
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?
@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/
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.
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?
@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.
Can someone help?
My data doesn’t populate the fields in my spreadsheet after i apply the proper steps. What am I doing wrong?
@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.
Grrr. How’d I miss that?
Thank you!
If that doesn’t work…
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.
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
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
@ 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.
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
Thanks for the help Dillon!
I feel like a real wanker for missing that piece of information.
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?
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
@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:
with:
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.
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.
@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.
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.
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
@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.
Thank You for your time and patience
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
@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!
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.
@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!
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.
Sorry, the code that changed was the part ending in:
YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK” method=”POST”>
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.
@George Sorry I can’t give you a better answer but there is no way to retrieve those missing sign ups.
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.
@Scott Paste a link to your live form rather than pasting code.
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
@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.
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:
Thanks – that was exactly what I was looking for !
Thanks so much. At least. So I can use more and more Google Form for my customers. That’s so useful.
Thanks again
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?
@Daniel
No, it won’t update automatically.
Hi,
I have doing all the steps but when i submit data doesn’t appear in spreadsheet…
Can you help me?
tks in advance
@Rui I can take a look at your form if you post up a link via comments or our Contact page.
@ Dillon here is the link to my form
http://hugorib5.freehostia.com/form.html
tks
@Rui You have missed the very important Step 9 for confirmation page redirection. Also, you’ve left the stylesheet outside the head tags.
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?
@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!
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?
Whoops, meant to post that on the validation tutorial. Sorry about that…
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…’
@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.
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.
@Peggy No problem. Glad we could help!
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 :)
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?!
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;
@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.
[...] How to style Google forms [...]
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.
@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!
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.
@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.
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.
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??
@ 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!
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.
Thanks a lot, this got me out of a nuisance.
Brillant !
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
@ Tabbara I’m glad you found this useful!
@ Jim You are exactly right on both counts.
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?
@ 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.
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
…..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.
[...] 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 [...]
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.
@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!
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
@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.
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
@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.
Fantastic! It was simple to do and easy to embed. Thank you for your help.
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
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.
@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.
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;
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.
@Harpik & Phillip
Two good tips!
For anyone interested, we’ve just added an update version of this post: How to style Google Forms: Redux
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
@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.
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.
@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.
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?
and how can move the entered data to the thank zou page for last check<
Awsome! I really need this right now. Thanks for sharing it, and thanks to Google, too.
Thank you so much for these tips, excellent
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
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).
@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.
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? :)
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.
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.
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 ;)
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.
Cool solution. We lost most of the code. Can you re-post the code between pre tags?
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
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.
Awesome!!!!
This is brilliant!!! Thanks guys!
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 :).
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
Nice and useful. Perhaps an useful addition. Try FireBug with this, since you can easily customize the form “live”.