Adding forms as a way to include information in a Google Spreadsheet was one of the best decisions made by Google lately as it increased the adoption of the product. Unfortunately, Google doesn't offer options to customize the forms or validate the input. But just because Google hosts the forms for you doesn't mean you can't copy the code on your web pages and edit it.
After copying the code, you can edit the CSS rules to customize the form, remove the references to external files or the links to Google's terms of use. This article has a list of pretty forms customized only using CSS. If some of the fields need to have a certain format (for example: dates, email addresses etc.), you may include some JavaScript code that validates the input before submitting the form or after a certain field loses the focus. This JavaScript library includes the code for some common validations, so you can use it without too much programming effort. LiveValidation requires to write some code, but it validates the input as you type.
Here's a simple styled form that validates the first field using an annoying alert (you can submit the form only if JavaScript is enabled):
And here's the code:
Validation only works when JavaScript is enabled in your browser. Note that if you edit the form using Google Docs, you need to change the code from your web page.
{ Thanks, A. }
Your form is confusing! It did not accept my answer of 1996 to the first question; I used google.stanford.edu then. Do you mean google.com or its predecessor? Your data will be worthless without clearer instructions!
ReplyDeleteDoes this violate TOS?
ReplyDeleteJust curious...
@Bruce:
ReplyDeleteThat was just an example. I included 1996 in the valid date range.
@Pat:
I don't know, but Google Docs no longer has special terms of use. Maybe this phrase from Google Terms of Service could cover it: "You agree not to access (or attempt to access) any of the Services by any means other than through the interface that is provided by Google, unless you have been specifically allowed to do so in a separate agreement with Google."
Only thing i miss is custom redirect. I want something so that my website visitor can come back to where he left. Is this possible ?
ReplyDeleteI updated the code so that the form no longer sends you to Google's "thank you" page. The form uses as a target the name of an invisible iframe and the script displays a success message in the onsubmit event.
ReplyDeletehey man...that simply rocks...just a question...can i do it without iframe or is there another way of takings user to a custompage
ReplyDeleteYou could use some tricks to send users to a custom page (like redirecting users after a number of seconds in the onsubmit event), but I don't see the point. Showing a message inside the same page is simpler and more effective.
ReplyDeleteI played with the code for this a bit when forms were launched but the ability to stay on the same page is a genius touch. Thanks.
ReplyDelete(I know it's been some time since the last comment...)
ReplyDeleteMy question: Is there a simple way (some lines of code perhaps) to let the reader stay on the same page (as you did here in your example) WITHOUT any kind of validation. Or what do I have to remove to just have the reader stay on the same page with the custom thank you - without the validation code. I tried to remove a few things from your code but it didn't work out. What do I have to add to my code to just stay on the same page? Thanks for any help. (If it isn't that easy, just forget about it - thanks anyway. Great post.)
Based on the info provided in this article there is now an online way to customize google forms. You can add custom messages, required fields and date fields with a few clicks. Visit googleforms to customize your forms.
ReplyDeleteJust curious: does setting the action attribute to an empty string, and then giving it a value in the onsubmit event, like
ReplyDelete< form action="" onsubmit="this.action='http://...'; if(..) .. else .." >
behave differently than simply setting its value using the action attribute, like
< form action="http://..." onsubmit="if(..) .. else .." >
By the way: Google might have changed the names of the parameters:
< input type="text" name="single:1" >
in current (embedded) forms would read
< input type="text" name="entry.1.single" >
So, a warning: not only when YOU change your form definition you need to revise your HTML, but also when Google changes something...
I assume that making the onsubmit somehow invoke
ReplyDeletelocation.href = "thankyou.html";
like
onsubmit="if(validate(this)){location.href=..; return true;} else return false;"
would yield serious synchronisation problems (the form probably not being properly submitted when the redirect is started). If you want to do a redirect after submitting the form, see http://copaseticflow.blogspot.com/2008/03/cowbells-without-retakes.html.
@Arjan:
ReplyDelete<< Just curious: does setting the action attribute to an empty string, and then giving it a value in the onsubmit event behave differently than simply setting its value using the action attribute? >>
I did this to prevent those who disable JavaScript to submit the form without validation. Of course, there are many other ways to bypass the validation, since it's not done on the server side.
<< Google might have changed the names of the parameters... >>
The form still works.
Hi!
ReplyDeleteCould you please post the code for just the custom thank you message ... I can't figure out how to separate out the validation part.
Thanks.
paul.
You can add a custom thank you message in the form's preferences. The setting is called "custom confirmation message".
ReplyDeleteHere's a link to a simple tool that will generate the code for a form that redirects the user to a custom page after submitting.
ReplyDeletehttp://sneakysheep.com/google-docs-form-tool.php
Really helpful customization - I have a two stage registration process which first needs to collect information from the registrant and store it in a Google Doc/spreadsheet and then prompt the user for payment using Google Checkout. I was able to use the hidden iframe target along with a timed redirect in javascript to achieve the posting of the information to the Google spreadsheet and then directed onto a second page which then displays the registration costs and Google checkout buttons. I used this great snippet for the redirect from: http://www.quackit.com/javascript/codes/timed_javascript_redirect.cfm
ReplyDelete@slists,
ReplyDeletethe tool you've made looks great; but it doesn't seem to be working right now - the validate options just say FieldsRequiredCalender ... is this a temporary thing?
thanks!
Great article!
ReplyDeleteAs it happens I just wrote a tutorial for styling Google Forms: http://www.morningcopy.com.au/news/how-to-style-google-forms/
No date validation or ugly Google confirmation pages.
I learned a lot so thanks very much! Quick question though. I need to check for a valid email so I added the javascript as well as a quick check for an empty name field. Works great EXCEPT when there is an invalid email address, yes the alert message pops up and no the "thanks" is not displayed, but the entry is placed in the google spreadsheet with the invalid email address. Got time to help?
ReplyDeletecode is on
http://www.in2artgallery.com/contact_form.html
This comment has been removed by the author.
ReplyDelete