Adding Facebook Login to Google Docs Forms – Part 2

In my last article, I gave an outline of how we can enhance a Google form with a Facebook login. The steps were as follows:

  1. Create a Google form as usual
  2. Create a plain, empty html file on a web server.
  3. Embed the Google form into the empty html file (as an iframe)
  4. Within the html file, add a Facebook login widget via the Facebook Javascript SDK

The first three steps are pretty easy so we’ll tackle those all at once. I created a sample Google form and made it publicly available:

graeme’s cool form

Next, we need a plain html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Graeme's cool form embedded</title>
  </head>
  <body>
  </body>
</html>
</code>

Open up your favourite text editor, and paste the above into it, and save it to your computer as a .html file.

Now we just embed the Google form into the HTML file above. Google actually makes it really easy to do this. When editing the Google form, click File, Embed, and copy the URL that Google gives you. It should start with <iframe.

embedform

embedform2

Now just put that URL right after the <body> tag in the html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Graeme's cool form embedded</title>
  </head>
  <body>
<iframe src="https://docs.google.com/forms/d/1QK5j8aPC_PvoB0j2Nubkw-agWZ2QJKXbw6QUR_OOtCs/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
  </body>
</html>
</code>

That’s it! The Google form is now embedded in a website. Now, if you have your own web server, you can put that file up and try it out. If you don’t, no worries. Just open it up with a web browser on your local computer to see how it looks.

Depending on the size of your form, you may need to adjust the size of the “window” (iframe) that your form is displayed in. You’ll notice the default width (760) and height (500). Adjust those as you like to make your form fit nicely.

That’s it for now. Next up: adding Facebook login. As always, feel free to contact me.

Leave a Reply

Your email address will not be published.