Disconnect Forms from Google Docs for Complete Customization

Google forms provide a quick, easy, and free way to collect information from customers. The forms can even be embedded within an existing website to give a more consistent look from one page to another. Unfortunately, Google doesn't supply very many options for customizing forms. There is a way around these limitations, however.

Building Forms

First things first, we need to build a form using Google Docs. Note that this requires access to a Google account which can be created for free. Once established, a form can be created by

• Starting Google Docs
• Click Create > Form (see Figure 1)
• Set the title, choose a theme, and click OK
• Add questions and other information needed for the form

Figure 1. Create New Form

My previous post titled "Rapidly Developing Forms with Google Docs" contains additional information for adding questions. For now, let's skip ahead to prying the form away from Google.

Disconnecting from Google

Okay, we're not completely disconnecting the form. Google Docs will still be used for processing form submission. However, the form itself will be removed from the system and will no longer be editable directly through Google Docs. To proceed

• Go to the live form view
  • If you're in the view where you can edit the form, click the "View live form" option (see Figure 2).
• Open the source code for the page
• Locate the opening and closing <form> tags
• Copy the code between these tags (including the <form> tags)
• Paste the code into your website

Figure 2. View Live Form

From here, the form can be modified as we see fit. The form fields, for example, can be modified to appear on the same line as their corresponding labels. The submit button can be changed to match the design for our website. As long as we don't change where the form information is sent, how the information is being sent (POST), or the id and name attributes associated with the form tag and fields, we should be able to customize whatever we want.

Example Form

To demonstrate how Google forms can be simplified, let's run through a quick example. If our form asks for a name and e-mail address, the code provided by Google will look similar to the following:

<form action="https://docs.google.com/__your_form_processing_address_here___" method="POST" id="ss-form" target="_self" onsubmit=""><ol style="padding-left: 0">
<div class="ss-form-question errorbox-good">
<div dir="ltr" class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-item-label" for="entry_1873320168"><div class="ss-q-title">Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="ss-required-asterisk">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="ltr"></div></label>
<input type="text" name="entry.1873320168" value="" class="ss-q-short" id="entry_1873320168" dir="auto" aria-required="true">
 
</div></div></div> <div class="ss-form-question errorbox-good">
<div dir="ltr" class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-item-label" for="entry_941720192"><div class="ss-q-title">E-mail
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="ss-required-asterisk">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="ltr"></div></label>
<input type="text" name="entry.941720192" value="" class="ss-q-short" id="entry_941720192" dir="auto" aria-required="true">
 
</div></div></div>
<input type="hidden" name="draftResponse" value="[]
">
<input type="hidden" name="pageHistory" value="0">
 
 
<div class="ss-item ss-navigate"><div class="ss-form-entry" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit">
<div class="ss-secondary-text">Never submit passwords through Google Forms.</div></div></div></ol></form>

Much of that code is utilized by Google for stylizing purposes. With the form being disconnected, the code can be stripped down to the essentials.

<form action="https://docs.google.com/__your_form_processing_address_here___" method="post" id="ss-form">
<div><label for="entry_1873320168">Name*</label> <input type="text" name="entry.1873320168" value="" id="entry_1873320168" /></div>
<div><label for="entry_941720192">E-mail*</label> <input type="text" name="entry.941720192" value="" id="entry_941720192" /></div>
<div><input type="submit" name="submit" value="Submit" id="ss-submit" /></div>
</form>

Just be sure to double check that the form still submits the necessary information to Google Docs. It's also a good idea to run the updated code through something like the W3C Markup Validator. The form can then be stylized to match our own website.

Adding More Fields

It was mentioned earlier that once a form is disconnected from Google it can't be modified through Google Docs. Well, that's not entirely true. There are ways to update the form; it just requires an extra step or two.

To add more fields, the form which is still attached to Google Docs needs to be updated. We can then go back into the source code as before and grab the new code. We don't need the entire form this time; only the code for the new fields. The new code can be stripped down as before and added to the custom form.

Conclusion

Hopefully this provides a better idea of how Google forms can be disconnected from Google Docs. It should also give a general sense on how the forms are managed afterwards.

It's worth noting that disconnecting forms from Google Docs may violate Google's Terms of Service (TOS). Under the usage portion, it says "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." Violating the TOS can result in your account being suspended.

If you're okay with that, join me next week as we discuss methods for pre-populating the newly liberated form.

Related Posts

• Populate Forms Which Have Been Disconnected from Google Docs
• Advanced Uses of Google Forms: Customizing and Pre-population
• Rapidly Developing Forms with Google Docs