Customizing and Embedding Google Docs Form in your website.

The advantages of using the google docs are many. When it comes to using the google form, thought there are many advantages there are some disadvantages as well. The advantage is that you can quickly build a form and get the data placed in a spreadsheet automatically. More over you can receive notification when a form is submitted. All this makes Google Docs Form my favorite. But with all the advantages it also have some limitations. It cannot be easily customized. It looks ugly to have the google form on your site without customization as it stands out from your design. Here I will take you through steps by step instructions to customize the Google form. It requires you to have some basic knowledge of HTML, CSS and Javascript.

Create a Web Form with Google Docs

To go to your Google Docs account either go to the URL docs.google.com directly and login, or from your Gmail account press the ‘Document’ menu at the top right. To create a Web Form click “Create New” and “Form” at the top left on the Google Docs main page. This will take you to the Form editing page. You may give a meaningful name and description for your new form in the appropriate text fields. Continue down by inserting new fields by entering field text and field type information. This is an easy step that you can quickly master by trial and error. Once the Form is build, go to the link at the bottom of the page ‘you can view the published form here’ to view live form.

Customizing the Form

Before you can customize the form you need to get the code that Google had automatically generated. For that you ‘Right Click’ the live form and click ‘View source’ menu. Now you will be show the code behind the form. All that we are interested in is the form. So copy the code that starts with <form ….. and ends with </form> into your favorite html editor. All that we are interested is the form tag and the input tags. We can’t directly place the extracted code into our website because when the form is submitted it will be directed to the default Google page and shows the Google response. To get around this issue we need to do three things.

1. Make a hidden iframe element in the page (name=”GoogleResponse” id=”GoogleResponse”).
2. Make a hidden div element to place the response message. This must be placed where you want to show your message when the form is submitted (name=”CustomeMessage” id=”CustomeMessage”).
3. Set the target element of the form element to the name of the iframe element that was created in step 1

(target=”GoogleResponse”).

This iframe is the least important for us as its an hidden field. Place it some where at the bottom of the page even if something goes wrong it must not be easily visible to the user. This iframe will receive the response from the google page and it will be hidden from the users view.

Place a message div container at the top of the page, hidden by default. When the form is submitted the this container is made visible, which would contain a response to the form submission.

The form is placed within a div container element. The action value/link is placed within the onsubmit parameter to prevent accidental or unexpected form submissions. The form is first validated with a javascript and the response is directed to the hidden iframe by assigning the ‘target’ parameter of the form to ‘GoogleResponse’. I have only included the important parts like input fields below. You will have to include labels and other components and style them with CSS to make the form look good.

.
.

.
.

.


.

.
.

Javascript is used to check the input validity before the form is submitted. Here is a simple example. You may tailor it to your requirements.

If you have further questions you are free to ask.

• Reference:
• http://googlesystem.blogspot.com/