Podcastapalooza Part 3 – Using Google Forms and Webs

wpid-podcastlogo-2013-02-10-14-47.jpg

The guide continues. Part 1 was a “quick” overview of the whole unit. Part 2 was all about the resources I created and how I shared them. You no doubt saw that I had a booking system in place for students to check out the different microphones. If not you can check it out here in all of its simplicity. Yep, you guessed it, that’s what we will be delving into today. The reason I am adding this section separate to the others is that this little trick is pretty handy and can work with just about anything. Click on past the break to see how I leveraged Google Forms and free website from Webs to make a very effective booking system.

Google Forms

A very powerful and often overlooked part of the Google Docs Office Suite is the the Google Form. What this does is allow you to create a form that anyone can fill out and then it populates the results in a summary format or in a spreadsheet. It’s wicked useful for collecting information from a lot of places and is quite effective as well.

Creating the form is super simple. Just access your Google Drive account. Click the Create button on the left hand side and select Form. It’s very straight forward really. Populating the form with questions and choices is just as easy. You can add as many items as you want. Check out the interface below.

wpid-lbh_017-2013-03-19-02-50.png

Once in the form, in the top right hand corner you can start to add questions. You have a number of questions types that you can chose from.

wpid-lbh_018-2013-03-19-02-50.png

You can also require those questions to be answered or not. Here is my form for signing up for the different microphones. The little, red stars next to the question means that the question must be completed before the form can be submitted. I required students to write in the members of their group and then select which microphone they wanted and the time they were planing on using it from a drop down menu with the times already typed in.

wpid-lbh_016-2013-03-19-02-50.png

Keep this form open as we move onto the next step. So far, so good right? Well now that you have the form what can you do with it? For my podcast unit, I took the form and embedded it into a website. Don’t worry, it’s sounds hard but it’s really pretty easy. No coding require – I promise.

Webs
I used Webs to create my website. It’s free, very easy to use (yes, even easier then Google Sites) and you can have a simple website up and running in minutes . . . literally. There are other services like this such as Weebly and Wix but I chose Webs (no particular reason they are all pretty good). All you need to sign up is an email address. I won’t get into the details of what Webs can do but I will show you what I did and how I did it.

wpid-lbh_019-2013-03-19-02-50.png

Once you’ve named and have a theme for your website and are ready to edit it; you simply have to drag icons from the bottom toolbar onto the page to add that type of content. No code required! Easy! So here is how I brought my Google Form into my website. At the bottom there is a Layout option. Click that.

wpid-lbh_020-2013-03-19-02-50.png

You will get a new set of tools to add to your webpage. Click and drag the Custom HTML module onto the webpage.

wpid-lbh_022-2013-03-19-02-50.png

Now let’s take a look at your form on Google Drive. At the top there is a selection for More Features. Clicking that will give you a drop down menu. From here select Embed.

wpid-lbh_024-2013-03-19-02-50.png

This will give you a box with . . . wait! I said there was no coding. Did I lie to you?! No, don’t look away. I swear there is no coding here. All you have to do is copy that long, long scary looking line of code. No changes are necessary.

wpid-lbh_025-2013-03-19-02-50.png

Now go back to your Webs website and double click on the Custom HTML module you added. I think you see where this is going. Paste the code into the box and click the Save Changes button. The box will disappear and your form will be there!

wpid-lbh_026-2013-03-19-02-50.png

Be sure to click on the Publish button in the top right hand corner in your Webs editor and it will publish the website to the Interwebs (that’s just a funny way of saying Internet :)).

wpid-lbh_028-2013-03-19-02-50.png

Publishing the Spreadsheet
Now comes the truly great part. Having the form on the website means anyone, at anytime can fill it out-sweet! The problem is, they won’t be able to see who has already booked a microphone and for what time-not so sweet. That makes the form helpful for you, the teacher, but not so helpful to the groups of students who need to plan and organize a time to record.

So go back to your Webs site and drag another Custom HTML module onto the same page that your form is on.

wpid-lbh_029-2013-03-19-02-50.png

Now go back to your Google Form. You see, Google has to store all those responses some place. They usually (unless you tell it otherwise) store it on a Google Spreadsheet. At the top of your form there is a selection called See Responses; go ahead and click that. A drop down menu will appear and it will ask if you want to see a Summary or the Spreadsheet-chose Spreadsheet.

wpid-lbh_030-2013-03-19-02-50.png

Now it will take you to your spreadsheet. I have one entry because I submitted the form myself, but yours will most likely be blank which is cool.

wpid-lbh_031-2013-03-19-02-50.png

We want to put this spreadsheet in our Webs site so the students can not only sign up but also see what is available and when.

To do this click on File and then select Publish to the Web.

wpid-lbh_032-2013-03-19-02-50.png

This window will pop up. Click on Start Publishing.

wpid-lbh_033-2013-03-19-02-50.png

When you click on that button you will notice that the bottom part of that window changes and new information becomes available. Select the drop down menu that has Web page on it. From there select the option HTML to embed in a page.

wpid-lbh_034-2013-03-19-02-50.png wpid-lbh_035-2013-03-19-02-50.png

Now copy the HTML code. It should start out with <iframe width=

wpid-lbh_036-2013-03-19-02-50.png

Now I think you know what to do. Go back to your Webs page and paste that HTML code into the second Custom HTML module you added to your webpage and voila! Click publish and you have a fancy-dancy booking system where students can see the results in almost real time. Here is what my finished product looks like. If you would like go to my website and try it out yourself.

wpid-lbh_037-2013-03-19-02-50.png

Notes
I found that when filling out the form the results did not display immediately on the spreadsheet below. Sometimes it took up to 5 minutes. On the spreadsheet, on my Google Drive, though, I saw the results immediately which is nice.

However, I did find that this eliminated arguments between groups over resources when I show them that . . . “Yes, group A did book the microphone before your group.”

Also, this system is flexible and can be used for a lot of applications: parent conferences, student conferences, professional development workshops, gathering and organizing data and more that I can’t think of right now.

About Patrick Cauley

I teach middle school technology and love to play around with tech and teach students and colleagues alike. You can read my blog at www.itbabble.com
This entry was posted in Patrick Cauley, Podcast, tutorial and tagged , , , . Bookmark the permalink.

Leave a reply! The IT Babble Team Need Feedback.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s