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
Google Docs screenshot showing how to create a new 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
Screenshot showing how to view the live form
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">
<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>

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.


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


  • #2 Patrick Nichols on 08.31.13 at 3:46 pm

    @Joe – To be honest, I'm not sure. From what I can tell, Google doesn't provide an option for maintaining a database that can be used to pre-populate Google forms. The closest option, I found is discussed here: "Populate Forms Which Have Been Disconnected from Google Docs." Of course, this option requires an extra step of transferring any updated information out of Google into your own database…and I'm not sure if the process can be automated.

    For what it's worth, I looked into a service called SurveyGizmo which seems promising. They have an advanced feature which connects their forms to an external database. This feature, however, requires an Enterprise account which isn't free.

    Please let me know if you find something to meet your needs—especially if the solution is free or inexpensive and it's easy to implement.

  • #1 Joe on 08.30.13 at 12:20 pm

    Hi, thank you for sharing the information. Patrick, can we build a pre filled Google, dynamic, from within the Google managed site. For example- populate the fields from a spreadsheet or a database or do some coding itself in the form to do some logic. Can we do it. I am planning to build an employee portal but I am not sure how helpful Google managed sites can be. I need the page to be dynamic- based on the user selection, stuffs should happen. For example when the employee updates the information, the data needs to be updated in the table should not create a new row. If the employee gets married he should be able to enter the details of his wife. Do you think Google managed sites can do it?

Leave a Comment