May 3, 2008

Customize Google Docs Forms

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):

In what year did you first use Google?
What search engines did you use before Google?



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

21 comments:

  1. 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!

    ReplyDelete
  2. Does this violate TOS?
    Just curious...

    ReplyDelete
  3. @Bruce:
    That 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."

    ReplyDelete
  4. 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 ?

    ReplyDelete
  5. I 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.

    ReplyDelete
  6. hey man...that simply rocks...just a question...can i do it without iframe or is there another way of takings user to a custompage

    ReplyDelete
  7. You 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.

    ReplyDelete
  8. I 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
  9. (I know it's been some time since the last comment...)

    My 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.)

    ReplyDelete
  10. 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.

    ReplyDelete
  11. Just curious: does setting the action attribute to an empty string, and then giving it a value in the onsubmit event, like

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

    ReplyDelete
  12. I assume that making the onsubmit somehow invoke

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

    ReplyDelete
  13. @Arjan:
    << 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.

    ReplyDelete
  14. Hi!

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

    ReplyDelete
  15. You can add a custom thank you message in the form's preferences. The setting is called "custom confirmation message".

    ReplyDelete
  16. Here'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.

    http://sneakysheep.com/google-docs-form-tool.php

    ReplyDelete
  17. 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
  18. @slists,

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

    ReplyDelete
  19. Great article!

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

    ReplyDelete
  20. 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?
    code is on

    http://www.in2artgallery.com/contact_form.html

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete