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:
<style type="text/css" media="screen">.ss-form-container{width: 380px;background-color: #FFF;border: 1px solid #CCC;padding: 0.5em 1em;font-size: 0.9em;}.ss-q-title{font-weight: bold;padding-left:7px;display: block;}.ss-q-submit{color: #000;}.ss-form-entry{margin-bottom: 1.5em;} .ss-q-short, .ss-q-submit{background:#f7f7f7;border:solid gray 1px;margin:8px;padding:0px 3px; color:#666666; }</style><script type="text/javascript">function custommsg() {document.getElementById("form-message").style.display=""; document.getElementById("form-message").innerHTML="Thanks for your answers!"; document.getElementById("form-container").style.display="none";} function validate(f){var year =parseInt(f.elements[0].value);if (isNaN(year)|| year<1996 || year > (new Date()).getFullYear()){alert("Invalid year");return false; } return true;}</script> <div class="ss-form-container" style="display:none;" id="form-message"> </div> <div class="ss-form-container" id="form-container"><form action="" method="POST" target="fake-target" onsubmit="this.action='http://spreadsheets.google.com/formResponse?key=pLaE9tsVLp_1lGkqPo-vdfw'; if (validate(this)) {custommsg(); return true;} else return false;"><div class="ss-form-entry"><span class="ss-q-title">In what year did you first use Google?</span><input type="text" class="ss-q-short" name="single:0" /></div><div class="ss-form-entry"><span class="ss-q-title">What search engines did you use before Google?</span><input type="text" class="ss-q-short" name="single:1" /></div><p></p><input type="submit" class="ss-q-submit" value="Submit" /></form></div><iframe src="#" id="fake-target" name="fake-target" style="width:0px; height:0px; border:0px;"></iframe><br />

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