Creating a Contact Form with Google Docs

Since there was a good response on my last tutorial, I figured I'd push my luck and try another one. Google Docs are a fabulous thing. Easy to use and accessible anywhere. It wasn't until maybe a month ago that I realized they had an even more fabulous thing - Google Forms. What I love about Google Forms is that you can embed it in a website, blog, or email and all of the responses are automatically entered into a nicely organized Google Docs Spreadsheet. I use Google Forms for the Contact Us form on the sidebar here, but  I've noticed a few blogs also using these for giveaways instead of the typical, 'Comment on this post'. I might even follow that trend. Besides making it easy to pick the winner - Google spreadsheet entries are numbered - it's also much more confidential for the readers since they don't have to leave their email address for everyone to see. The only drawback I can see would be that, since other readers can't see the entries, there's no way for the blogger to verify that the winner was really randomly drawn.

Anyway, I'm going to show you how to embed a Google Form into your blog at blogger, but you can use this same concept in a website or email. If any of you figure out how to embed the form into a Facebook tab, please let me know!

If you don't already have a Google account, create one and then head over to Google docs. From there, select Create new and then select Form.

You should see something like this...

Select the questions you want by either editing the current questions and/or adding new ones...

For my questions, I used name, email, comments, and added a checkbox for the newsletter subscription. You can also change the look of your Contact Form by changing the theme, but I find that the plain theme works the best in blogger.

Once you have that done, you can edit the confirmation screen and embed your form. 

I left my confirmation message as it already was. Unless you want everyone to see all the responses, leave the Publish response summary unchecked. If you check that, then as soon as someone submits their answers, they will see all the other responses too. 

Go back up to More actions and select Embed. You should get a little pop up box with your embed code in it. 

To add to your blog sidebar, log in to blogger and go to Design. On the sidebar you want to use, select Add a Gadget and then HTML/JavaScript. Now you just need to copy and paste your embed code...

 More than likely, you'll have to change the width of your contact form so that it'll fit in your sidebar. My sidebar width is 250, so I changed the form width from 760 to 230. You can also change the length of your contact form. If it's too short, you'll have a scroll bar on it. I changed mine from 624 to 700. This is one of those things that you might have to mess with a little bit before you get it exactly how you want it.

Here's what my contact form looks like in the blog sidebar.

 

To see the form entries, go back to your Google docs account and click All items. A spreadsheet with the same title as your form should be there. 

Here's what the spreadsheet looks like for my form...

Feel free to share this post, please just let people know you found it over at The Cloth Chronicles. :)


Like this post? Then please vote for me over at Top Mommy Blogs: 



♡