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 Form Experts.
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
Fatal error: Call to undefined function most_comments() in /home/morning/public_html/wordpress/wp-content/themes/morning_copy/sidebar.php on line 22
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;
@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.
@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?
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).
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”.
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?
Sorry, I think the comment form stripped out the HTML tag from the last line of your comment. Did you mean HEAD section?
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 :)
i opened the source code, but i cant edit it. what should i do just can edit the source code? Thanks.
You need to copy and paste the source code. Check out Step 7.
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…
love this post! helped me a lot. thanks!!
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.
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.
Very cool. This helped me out with that stupid response form.
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?
What program is giving you those error messages. Are you pasting the code into a content management system?
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.
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.
I still don’t really get it … I can’t figure out how to insert the custom gadget.
Is there another way to do this? How do I edit the site without using Google sites?
I managed to figure out how to insert the gadget into the page. But I don’t know how to proceed from there.
Sorry, I don’t know the first thing about Google Sites. I suggest you check out their documentation and user forums.
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
You are missing these vital elements from your form.
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
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 !!
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
Thanks. Good tip for Google app users!
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/
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.
@Elizabeth – Note the highlighted area in this Google Forms screenshot.
Excellent! … I’ve already finish my tests, It works! … I’m working on the desing now! Greetings from Peru
follow this link http://www.2webvideo.com/video-production/customizing-google-docs-form-for-email-validation-with-free-jquery-script to learn how to validate your google forms and so on.
Thanks Amed! I’ve been meaning to do a video tutorial but you save me the effort.
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
@James Check out our Google Forms with jQuery validation post for a solution to query.
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.
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.
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!!
Thank you so much – been trying to do this for hours straight and here is the only solution that is easy enough to follow :)
You are welcome!
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?
Google Sites strip out the iFrame. Here’s a tutorial for installing the iFrame Gadget for Google Sites: http://j.mp/ff7t1t
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.
You have 2 ‘form actions’ in your form. All you need to do is delete the highlighted line of code in this screenshot.
[...] 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 [...]
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
@Iciar No problem. Just have to replace the onload value from window.location
onload="if(submitted){window.location='http://www.morningcopy.com.au/tutorial/thankyou.html';}"to window.open
onload="if(submitted)window.open('http://www.morningcopy.com.au/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.
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
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
@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.
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?
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!
We will take a look if you post a link to the form.
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!!!
It’s not working because you are using Google Apps. Here’s a workaround that should fix the problem.
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!! :)
ooops, my html was removed. but basically, still not working as per my earlier explanation.
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!
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?
hmmm… there is no tag in the source code……..i think this trick is outdated..
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
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!!!
The example above still works. Post a link.
http://www.eddiefortexas.com – it is a google apps account. I have many other sites with the same issue. No code changes for months. No submissions since 5/16/2011.
Looks like the input type=”image” is causing the issue. I changed it from an input to a button and things are working now. I had a dozen sites with forms that were working with inputs that mysteriously stopped working, but the button swap seems to have fixed them.
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
Take a look at your form action. Looks wrong.
How so? I copy & pasted the form action from the instructions above… I just did it again to make sure, still getting the same results.
Never mind, after staring at the code long enough I realized that the id needed to be inside the form action. Working great now, thanks!
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
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
It’s because you are using Google Sites. Check out the comments above for workarounds.
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!
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
Kelley, step 8 says to insert your “stylesheet.” A stylesheet is a CSS file. It’s a separate file that has simple code that tells the form how to look (e.g., pink backgrounds). Here’s a walk-through:
http://www.sitepoint.com/style-web-forms-css/
To insert a stylesheet anywhere between your and tags in your website’s html file, copy/paste the following line of code, but replace the http:// address to wherever your stylesheet is uploaded.
For more answers, google around for “how to style forms with CSS”
Have fun!
Bummer, it removed my code. Check the example here: http://webdesign.about.com/od/css/f/blcssfaqlinkext.htm
This is just what I was looking for. It works well! :o) Thanks!
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!
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.morningcopy.com.au/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
Fount the problem, the link should be:
http://www.morningcopy.com.au/announcements/google-forms-update/
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!
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!
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]
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;
edit:
here is the code http://pastebin.com/dfJ6N3sL
Help is greatly appreciated, thanks!
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?
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.
Any idea how to do Step 9 when embedding the form in a facebook page?