July 28, 2011

How to add a form to blog using Google Docs

Google Docs includes an option to create a form which can be added to your blog to collect information from your visitors. The data you collect through your form will be available for you as a spreadsheet or other documentation within your Google Docs account.

Forms are a good way to collect information from readers of your blog. For instance, you can add a survey to get feedback, add a contact form to allow for private comments, or include a form to collect addresses for a mailing list.

There are many tools available to generate forms to include on your blog and an online search will provide you with many results. Besides Google Docs, Jotform (free) and Formstack offer similar form generator tools.

Create Form

In Google Docs, open the Create New menu and select Form.

create new form

To create a Contact form, for example, go to the Add Item and select one of the options. Text is a short answer option good for Name and Email fields. Paragraph Text is a longer option good for general comments.

edit form item

The Multiple Choice, Checkboxes, and Choose From List items are good for creating custom surveys.

Embed Form

The code to embed the form on a blog or website is generated by Google Docs. When the form is complete, go to the More Actions menu and select Embed.

embed form

Copy the iframe code provided.

In Typepad, create a New Page and click to the HTML tag. Please note the Rich Text editor should not be used when adding the code for the form. To see the form as it will appear on the published blog, click the Preview button.

Paste the form code into the Body field. The width and height of the form can be adjusted to fit your blog's design. In the code, edit the width="760" height="756" section. Unless the main contenct column is set to 800px or Fluid, the width will probably need to be set to 460px or less.

After you finish your page, click Publish.

Similarly, the form can be embedded within a Post. To place a smaller form in your blog's sidebar, you can use the Embed Your Own HTML at Design > Content.

Submitting the Form

Because the form is embedded via an IFRAME the reader will remain on your blog when they submit the content of the form. They will see a "thank you" note appear in the space the form previously occupied.

Link to Page

Once the page is published, click the View Page link to open the page in a new window. Copy the URL for the Page.

To add the link below the banner image, go to Design > Content and click the pencil icon to edit the Navigation Bar module. Add the new link to your page and click OK. Finally, click Save changes to update your blog.

You can also add the link to your sidebar using a Links TypeList.

Additional Information

See the Googles Docs help section on creating forms for more details.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services