Google Document Forms

From Web Developer Network Wiki
Jump to: navigation, search

Most of us are using frontier for our server needs and that can often put some technological limitations on what we're able to do. For instance we're unable to harness the power of php and MySQL in creating web forms and storing responses into a database. Enter Google Documents.

Original Ideas from here:

googledocs blog

Create a Spreadsheet

Log into using your Google account and create a new spreadsheet ("testing" in this example). Now enter the headings for your columns:


Form Time

On the upper/right corner of the screen, click on the "share" tab. Select the radio button, "Invite people: to fill out a form" and then choose the edit button. Here is where you can choose what type of form field and labels you want each column to appear as (each will be automatically created using your column headings with the default text area form element). You can adjust them to utilize radio buttons:


or longer text entries


Don't forget to save.

Go back to the top and choose the "Preview and Send" tab. Here you can simply select the drop down box and get the link to embed your form, but we want to incorporate it into the templates and use the form styles, so first uncheck "Include form in invitation email" and check "Custom confirmation message:" After unchecking the email option you should be presented with a link on the right side of your window, click on that link and you should see your form. Now take a look at that form's source code and ignoring all the styling and extra html code, select just the form element:


Copy and paste all that into the maincontent area of your UNL template page. Google's form doesn't have all the same elements as in the form styles - so add the fieldset and legend fields. Now it's time for some serious code trimming - get rid of all the fat related to Google's classes and random div elements the default form uses and trim up the code to reflect that of the form templates (The only REAL IMPORTANT field to LEAVE UNTOUCHED is that which Google will use to put each response in the applicable spreadsheet cell - "name" element in the input - example: name="single:0" - everything else can be altered if you wish). Here's what mine looks like after some reworking.

I make use of a little javascript validator which ensures that there is somethin gfilled in on the required fields. | validate.js - it's nothing real complex and there are many more robust options out there if you want specific field validation (i.e. make sure someone enters the correct format of an email address). The validte.js script calls on the inputs with the class of "reqd" to make sure some data gets entered and not skipped over.

<form action="" method="POST">
	<legend>Sample Form</legend>
			<li><label for="entry_0" class="element"><span class="required">*</span>Name</label><div class="element"><input type="text" class="reqd" name="single:0" id="entry_0" /></div></li>
			<li><label for="entry_1" class="element"><span class="required">*</span>Email</label><div class="element"><input type="text" class="reqd" name="single:1" id="entry_1" /></div></li>
			<li><label for="entry_2" class="element"><span class="required">*</span>How Useful is Google?</label><div class="element"><input type="radio" value="Very Useful" name="group:2" id="group_2_1" class="reqd" /><label for="group_2_1">Very Useful</label><input type="radio" value="Useful Enough" name="group:2" id="group_2_2" /><label for="group_2_2">Useful Enough</label><input type="radio" value="Not at all Useful" name="group:2" id="group_2_3" /><label for="group_2_3">Not at all Useful</label><input type="radio" value="Google? What's that?" name="group:2" id="group_2_4" /><label for="group_2_4">Google? What's that?</label></div></li>
			<li><label for="entry_3" class="element">Other Comments</label><div class="element"><textarea name="single:3" id="entry_3" cols="60" rows="5"></textarea></div></li>

			<li><label for="submit" class="element"> </label><div class="element"><input type="submit" value="Submit" /></div></li>
			<li><label for="reset" class="element"> </label><div class="element"><input type="reset" name="reset" value="Clear Form" id="reset" /></div></li>
			<li class="reqnote"><label class="element"> </label><span class="required">*</span> denotes required field</li>




After a user submits a form it will take them to the custom message you set when creating the form (I'm looking at ways to keep the form from taking users off our site - or at least giving them a link back into the site from the thanks message, will update as soon as I find anything).

You can now run statistical analysis to your hearts content on your collected form, use it for event registration, publish it using a google api, or any number of other options.

Personal tools