You are here

Embedding Google Forms

Submitted by Jerimee on October 28, 2011 - 1:56pm

For organizations who might be on a tight budget, or need to get a form or survey up quickly, there is always the option of embedding a Google Form on your site. The form will actually take in the information from your site and put it into a Google Spreadsheet so that it is available for you to analyze. Here's how it works:

How to create a form:

To create a Google form, you of course need to have a Google account. From your Gmail account, click on Documents in the top navigation bar. Next, click on [Create new] and select form. Fill in the information for your form, including title, text or instructions, questions, etc. To add more questions, click on [Add item] and select what you would like to add. In this dropdown, you can also add section headers and pagebreaks if you have a large amount of data to collect and need to make it feel more organized. You can always go back and edit or add questions, so don't worry if you're not sure what you want on the form.

Enter in your questions and fields that you would like to collect from users. The fewer "required fields" the better, in my opinion, because required fields can actually decrease the number of users who are willing to fill out the form. Google forms offers a variety of question types including: small text fields, paragraph sized text fields, multiple choice, check boxes, dropdown lists, scale, and grid. Here is an example where you can see the different question types: http://bit.ly/uTmBiB

To add some pizzazz to your form or survey you can select a Theme from the button in the top navigation.

Don't forget to click on [More actions] to edit the confirmation message that will appear after the form is completed by the user.

If you go to your google documents tab now, you'll see that there is a spreadsheet created with the same title of your form. This is where all of the responses will be entered, and where you access the information submitted. You can also access the form from here and populate a summary of the responses.

Embedding your form:

You can choose the embed option from both the form and the spreadsheet. On the spreadsheet page, click on [Form] and select [Embed form in a webpage...]. Copy the entire code. It will look something like this:

<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=xxxxxxxxxxxxxxxxxxxx" width="760" height="1311" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

Next you'll insert the iframe code just like any other iframe into your website. Many sites will let you drop it into the content box, or you might have to put it into the template of the page.

If you need to adjust the size of your form, you can edit the CSS right in the iframe code, or add it to your style sheet. To change the size of the form, locate the "width" and "height" commands in the iframe code and adjust them to the size you want.

Publishing portions of your form:

You might not want to display all of the answers to your form, but maybe you want to publish just one cell? For example, maybe you want to show your party invites how many people have RSVP'd to come, but not all of the other answers on your form. You can do this by tallying your attendees into one cell and then publish the information in that cell on an external website. To pull information out of Google onto a page, you first need to sign up for an API key. You can do that here.

Once you have the API key, from the spreadsheet, click on [File] and select [Publish to the Web...]. Select the sheet you want to publish from and click on [Start publishing]. Next, change [All cells] the the cell coordinate you want to display. You'll need to use the key from the code produced to pull the cell content onto your site. The code that Google produces looks something like this:

https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0Ag0tkxoBtS65dEZSV3EtR0Y4RmMwRmlwRTIwaDNHc1E&single=true&gid=0&output=html

From this code, you'll need to get the key. It starts after "key=" and goes to the first special character like this:

https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=
0Ag0tkxoBtS65dEZSV3EtR0Y4RmMwRmlwRTIwaDNHc1E
&single=true&gid=0&output=html

You can use the following Javascript code to populate the data once you've entered your API key, spreadsheet key, and cell coordinates:

  1.     <script src="ENTER ENTIRE API URL HERE" type="text/javascript"></script>
  2.     <script type="text/javascript">
  3.     google.load("feeds", "1");
  4.  
  5.     function feedLoaded(result) {
  6.       if (!result.error) {
  7.         // Grab the container we will put the results into
  8.         var container = document.getElementById("mybox");
  9.         container.innerHTML = '';
  10.         // Check out the result object for a list of properties returned in each entry.
  11.         // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
  12.         for (var i = 0; i < result.feed.entries.length; i++) {
  13.  
  14.  
  15.           var entry = result.feed.entries[i];
  16.           var div = document.createElement("div");
  17.  
  18. var date = new Date(entry.publishedDate);
  19.   date = date.toDateString().substr(4);
  20.  
  21.           div.appendChild(document.createTextNode('This much as of ' + date + ': $' + entry.content));
  22.           container.appendChild(div);
  23.         }
  24.       }
  25.     }
  26.  
  27.     function OnLoad() {
  28.  
  29.       var feed = new google.feeds.Feed("https://spreadsheets.google.com/feeds/cells/ENTER-SPREAD-SHEET-KEY-HERE/od6/public/basic?hl=en_US&range=ENTER-CELL-COORDINATE-HERE");
  30.  
  31.       feed.includeHistoricalEntries();
  32.       feed.setNumEntries(1); // maximum entries
  33.  
  34.       feed.load(feedLoaded);
  35.     }
  36.  
  37.     google.setOnLoadCallback(OnLoad);
  38.     </script>

Finally, drop this script into your template where you want the cell information to populate. Then you can change the "This much as of" text, customize your date format, etc.