Advanced Uses of Google Forms: Customizing and Pre-population

As mentioned in last week's post, Google provides very few options for customizing their forms. However, with a little extra work, the form can look anyway we want. All the extra space between questions can be removed. Labels can appear on the same line as the corresponding form field. Let's look at customizing Google forms and other advanced usage of the service.

Customizing Forms

One downside to Google forms is the lack of customization options. A theme can be added, but that's about it. There's no way to reduce the massive amount of space between questions. The labels and their fields can't be on the same line. However, all is not lost. There is a way to take back control.

As shown in an article from Immersion Media (Customizing and Styling Google Forms), the source code from a completed form can be downloaded and modified until our heart is content. As long as the id attributes don't change, the form results can still be directed to Google for processing. Just keep in mind that once the source code is downloaded, modifying the form in Google Docs will no longer affect the custom form.

To build the custom form, we only need the code for the form itself. For example, here's a simple form after removing the unneeded <div> tags and class and id attributes:

<form action="https://docs.google.com/spreadsheet/formResponse?formkey=-----YOUR_FORM_KEY_HERE-----&amp;ifq" method="POST">
<div><label for="entry_11">Name</label> <input type="text" name="entry.11.single" value="" id="entry_11"></div>
<div><label for="entry_12">Email</label> <input type="text" name="entry.12.single" value="" id="entry_12"></div>
<div class="button"><input type="submit" name="submit" value="Submit"></div>
</form>

For reference, the name text box looked like

<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_11">Name
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_11"></label>
<input type="text" name="entry.11.single" value="" class="ss-q-short" id="entry_11"></div></div></div>

The extra code is used by Google to style the form field and display an error message when the name (which is marked required) isn't filled out.

Pre-populating Forms

For those wanting to populate forms with information from a database or set some default(s), variables can be passed via the URL. To do that, we need to know how the form fields are named. Well, technically we're interested in the id attributes. Let's say our form has a field asking which country the visitor is from. Note the the following <input> tag's id is set to "entry_1":

<label class="ss-q-title" for="entry_1">Country
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_1"></label>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1">

If most visitors are from the United States, the field could be set so "USA" appear automatically. Taking the form's embed code

<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=YOUR_FORM_KEY"  width="760" height="623" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

The "Country" field could be populated by adding a GET variable for "entry_1".

<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=YOUR_FORM_KEY&amp;entry_1=USA" width="760" height="623" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

More information about populating fields can be found under Google Docs help (How to pre-populate forms via URL parameters).

Conclusion

Although customizing and pre-populating forms is relatively easy, it isn't entirely clear if the techniques violate Google's Terms of Services (TOS). Under the usage portion, they say

"Don’t misuse our Services. For example, don’t interfere with our Services or try to access them using a method other than the interface and the instructions that we provide."

Since the pre-population feature is listed through the Google Docs help files, that should be fine. Building custom forms might be a different story.

Related Posts

• Rapidly Developing Forms with Google Docs