Tuesday, April 22, 2008

Embedding Google Forms in Wikispaces

OK, this is a pretty specific topic, but I may not be the only one who's wanted to figure this out.

(I wish Google would make their cool logo for Google Docs available, as it would have spiced up this post. Oh well. See it here: http://googledocs.blogspot.com/.)

Here's the scenario: I'm helping Vicki Davis and Julie Lindsay set up a workshop this summer to teach their "Flat Classrooms" program to other educators. I'd set up the website as a Wikispaces wiki, with a custom domain. I wanted to use Google Spreadsheets new form capability (very sweet) for registrations--that way Julie and Vicki and I could all see the registrations as they came in. The trouble was, even though you can easily find good information on how to set up a form and collect information, and then even how to embed a form using the HTML "inline" function into another webpage--it wasn't working in Wikispaces. Using the aforementioned methods to add code in the "Other HTML" option from the "Embed Widget" button, I was getting a "404 Page not found" error.

So I read around and something clued me into the fact that when you set up a form in Google Spreadsheets, you can have the form emailed to you. In Gmail I went to the "show original" option while in the actual email that I received, and I could see the web-page code that had been generated to show the form in the email--which was regular code for an HTML submit form, and not an inline link to the form page. Well, that may be Greek to you or not, but all you need to know is that if you go down to the part of the original email that starts with the left triangle bracket before "form action="http://spreadsheets.google.com/formResponse?key=..." and you highlight through "/form" finishing with the right triangle bracket (which is almost at the end). You can now paste that code into "Other HTML" from the "Embed Widget" function, and your form will appear (and work!) on Wikispaces.

What I actually did after I discovered this would work is that I pasted the code into a text document, and then added additional "breaks" to make it look a little nicer before pasting into Wikispaces. But that's for nit-pickers... :)

15 comments:

  1. Great info, Steve. Will try this at work tomorrow. Will the same steps allow one to include a form in iWeb? I'll try and see.

    ReplyDelete
  2. Hi Steve,
    Thanks for the tip. I'm also experimenting with Google forms. Wondering if you might be able to post or email a screen shot of the form embedded in the wiki? Not quite sure I can picture what it looks like.

    Thanks
    Jason

    ReplyDelete
  3. Jason:

    You can just go to the registration page at http://www.flatclassrooms.com/Registration

    Don't register, though! :)

    Steve

    ReplyDelete
  4. Thanks Steve! My school will definitely use this function.
    Jason

    ReplyDelete
  5. Anonymous2:21 AM

    Thanks for the post, Steve. I figured it might work for other services, too, so I tried it out and discovered it also works well for Google Maps and Google Earth. Cool.

    -Mark

    ReplyDelete
  6. Anonymous3:51 AM

    Actually, it seems it doesn't work in Earth... only in Maps. Bummer.

    ReplyDelete
  7. Anonymous12:13 PM

    Thanks Steve,
    Played about with the html and added the form to a Ning sidebar.

    ReplyDelete
  8. Is there a way to not end up in that "thank you" page & leave the user the opportunity to let's say...load another entry?...I know I might be asking too much...but hey...it's google...

    ReplyDelete
  9. Hey, I want to post a form I made in a forum, any idea how, both googles instructions and yours leave me with errors :S

    ReplyDelete
  10. Surely: I'm guessing the forum you are trying to post to is not HTML-enabled?

    ReplyDelete
  11. Hi Steve - that's a pretty brilliant method! I am new to coding, websites, the whole deal. I am simply trying to embed a Google Form on my website, which is powered by CMS Hosting. I log in to manage the site. When I embed the link that google gives you when you click "embed" all it shows is "loading..." Do you have any idea why this happens?

    Thanks so much!

    Lauren

    ReplyDelete
  12. Steve,
    I was struggling to get my form built from another site onto Wikispaces until I found this. Not only did I figure it out, but I redid the form in Google Docs, embedded and now I have better access to my data through Google. Plus, with my iPhone I have access anytime now. Thanks!!!

    iPhone for Educators

    ReplyDelete
  13. Steve, I was just trying to do the same thing and found your post. I simply used the "document" widget and it worked great. I just edited the H and W dimensions in the code to make if fit properly on the page.

    ReplyDelete
  14. I know that this is an old post but it came in handy for me today. Thank you!

    ReplyDelete
  15. Anonymous10:33 AM

    This was exactly what I needed. Thank you!

    ReplyDelete

I hate having to moderate comments, but have to do so because of spam... :(