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

12 Comments

  • #1 Rob Hardy on 08.18.12 at 4:03 pm

    Based on the way you present this, I'm guessing there is no way to both customize AND pre-populate a form at the same time, right?

  • #2 Patrick Nichols on 08.19.12 at 9:37 pm

    @Rob – Unfortunately, the pre-population method described above only works for forms still plugged into Google. Custom forms can be populated, but you need to write the code to do so. Are you familiar with PHP?

  • #3 Gill on 05.20.13 at 5:44 am

    I'm interested to learn how you pre-populate custom google forms using PHP. Thanks.

  • #4 Patrick Nichols on 05.21.13 at 5:07 pm

    @Gill – Thanks for your interest. I'll keep that in mind for a future blog post.

  • #5 Patrick Nichols on 06.17.13 at 8:48 pm

    For those interested in both customizing and pre-populating Google forms, I have written a few new posts on the subject. To get started, check out the article titled "Disconnect Forms from Google Docs for Complete Customization."

  • #6 abhishek on 11.26.13 at 10:49 pm

    Hello frnds,
    i'm new to create google doc form and just has created 1 form with some text questions with multi choice question.
    If i have options like phone(1) and phone(2) and showing 1 text for phone(1) selection tht is MobileNo: and 2 texts for phone(2) selection tht is MobileNo: and Res No:
    then i want to use same text MobileNo: for both selction hence i will get MobileNo info in 1 cell in responce spreadsheet(excel).
    Is any way there for this?
    thanks in advanced

  • #7 Patrick Nichols on 11.27.13 at 7:05 pm

    @abhishek – Sorry, but I'm not sure I understand what you're asking. Would you mind rephrasing the question?

  • #8 abhishek on 11.27.13 at 10:19 pm

    I have radio buttons asking users to give phone numbers like option 1 is phone1 and option 2 is multiple phones.

    If user select 1st option i want to show 1 text with name Phone1(Mobile) but if user select option 2 then iwant to show 2 textboxes , 1st is exact same like above Phone1(Mobile) and 2nd is Phone2(Res.) . In this thing i created different form for each option selection but when i click on view responses excel file there are 3 diff coln which is phone1(mobile), phone1(mobile), and phone2(Res.). So here i want to show phone1 result in only 1 cell phone1. Can you provide your email id then i can share sample screenshot with you. Thanks in advanced , :)

  • #9 Patrick Nichols on 11.28.13 at 9:42 am

    @abhishek – I haven't seen any options to dynamically add fields to a form in Google Docs. However, you could look into a multi-page form:
    https://support.google.com/drive/answer/141062

    With that, the radio button selection would determine whether to show a page with 1 text box or 2.

    If you prefer to keep all the questions on the same page, you could look into using JotForm. They let you show/hide questions on the fly and there's a free version. If you're interested, I wrote a post about some of JotForm's features called "Build Forms Quickly with JotForm."

  • #10 abhishek on 11.29.13 at 7:26 am

    thx for help,
    i'll try this , and also if you will provide example then that ill be helpful for all viewvers and new comers :)

  • #11 JOHN KRUSE on 01.21.16 at 11:14 am

    I am successful in creating pre-populated forms from Excel spreadsheets. However the URL gets to be more than 256 characters and Excel doesn't like it. How can I get around that?
    Thank you

  • #12 Patrick Nichols on 01.21.16 at 7:04 pm

    @John – I'm sorry to say that I haven't used Excel to populate Google Forms.

Leave a Comment