First, the what:This article shows how to embed a new Google Form into any web page. To demonstrate ths, a chart and form that allow blog readers to control the recording levels of each instrument in Blue Oyster Cult's "(Don't Fear) The Reaper" is used. HTML code from the Google version of the form included on this page is shown and the parts that need to be modified are highlighted.
Next, the why:
Google recently released an e-mail form feature that allows users of Google Documents to create an e-mail a form that automatically places each user's input into an associated spreadsheet. As it turns out, with a little bit of work, the forms that are created by Google Docs can be embedded into any web page.
Now, The Goods:
Click on the instrument you want turned up, click the submit button and then refresh the page. Through the magic of Google Forms as soon as you click on submit and refresh this web page, the data chart will update immediately.
Turn up the:
powered by Google Docs
Terms of Service
-Additional Terms
Finally, the How:
Creating the Google Form:
Create a new Google Docs Spreadsheet. Under the 'Share' tab, select the 'fill out a form' radio button. Follow the rest of the self-explanatory steps to create a form and then e-mail the form to yourself. Don't forget to fill in the custom confirmation message. Otherwise, your users will get the message Google sends by default.
All of that was the SOP for Google forms. Now, for the interesting part. Your spreadsheet now contains a link above the data rows that reads "Go to live form". Clicking on this link will take you to a web page that contains the form. To move the form to another web page, simply dump the source code of this page. If you are embedding the form in an existing page, you will need to remove page specific tags like 'body' and 'html'. The sections to be removed/modified are shown in the sample below:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>multichoice form</title> <link type="text/css" rel="stylesheet" href="//spreadsheets.google.com/client/css/2794507541-v2-gooey.css" />
<style type="text/css" media="screen"> body { padding: 0.5em 1em; font-size: 0.8em; } h1 { font-size: 1.8em; margin-bottom: 0.2em; } span { display: block; } hr { border: 0; height: 1px; background-color: #DDD; } table { border-collapse: collapse; } td { border: 1px solid #CCC; padding: 0.1em 0.5em; } th { background-color: #969696; color: #FFF; padding: 0.2em 0.5em; } .g { color: #666; } .i { display: inline; } .ss-q-title { font-weight: bold; } .ss-form-desc { font: inherit; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; width: 99%; } .ss-q-help { color: #666; } .ss-form-entry { margin-bottom: 1.5em; } .ss-choices { list-style: none; margin: 0.5em 0 0 0; padding: 0; } .ss-powered-by { color: #666; margin: 0.2em; } </style></head>
<body><h1>multichoice form</h1>
<form action="http://spreadsheets.google.com/formResponse?key=pvFXGB-79Kl1cCNW5OTvYCA" method="POST"><div class="ss-form-entry"><span class="ss-q-title">Turn up the</span>
<span class="ss-q-help"></span>
<ul class="ss-choices"><li><input type="radio" value="Cowbell" name="group:0" />
Cowbell</li> <li><input type="radio" value="Bass" name="group:0" />
Bass</li> <li><input type="radio" value="Lead Guitar" name="group:0" />
Lead Guitar</li></ul></div>
<p></p>
<input type="submit" value="Submit" /></form>
<span class="ss-powered-by">powered by Google Docs</span>
<p></p>
<small><a href="http://www.google.com/accounts/TOS">Terms of Service</a>
-
<a href="http://www.google.com/google-d-s/terms.html">Additional Terms</a></small></body></html>
The red highlighted areas should be removed entirely. The brown area may be removed without ill affect, (it had no effect for this page, so I took it out). The yellow line may cause issues with pages from Microsoft Publisher that can be rectified by changing the border width to 0.
If you are moving the form to a blogger page, the html parser will tell you which elements it doesn't like. To keep your web page from redirecting to the google success message and requiring your users to press the 'back' button, simply add:
target="_blank"
to the form tag prior to the action attribute.
And that's it folks. That's how to use Google forms to embed a form in your own web pages.
Comments