Thursday, 10 May 2012

Adding a Simple Form to your Blog

Have you ever wanted to get Feedback from your readers in a structured manor but did not want to use your comments form?

Good, then read on as we take you on a very simple tutorial to add a Form to your site/blog post that allows you to collect the responses from your readers. For this tutorial we'll be creating a simple Contact Form but you can create/capture whatever information you like in your form.

First we have to create the Form. To do this we're going to use Google Docs/Drive.

1) Head on over to https://docs.google.com and click the Create button followed by Form.


2) Now we give our Form a name and Description


3) We create the Questions/Fields that we want to Capture.

First we'll ask them for their name


We can then decide if we want this field to be Mandatory/Required. In this case we do so I'll tick the "Make this a required Question" option. Once done, click the "Done" button.


Note: You can at any time go back and edit your Questions by click on the Edit Icon


Now we'll go ahead and create 2 more questions. One for email address and one for their comments.

Email first


To add a new item click the Add Item button and select what you want to add. For a comments box I'll create a new Paragraph Item.


Now for the Comments Question/Field



4) Now that we have created our contact form it should look like this. (Remember that at any time you can go back and edit/change the questions/text etc).


5) The next step is get the embed code so that we can post it to our site/blog. Click the More Action button and select Embed.


6) Copy the embed code from the dialogue box.


7) Now we need to turn on Notifications so that you get sent an email whenever someone fills out a form. This is optional so skip to step 8) if you don't require notifications.

To turn on Notifications click on the See Responses button and click Spreadsheet


You'll be taken to a blank spreadsheet where your form submissions will be stored.

From here click the Tools menu and then Notifications.


Now click the option "A User Sumbits a Form" and then when you want to be notified. eg either a Daily Report or an immediate email. The choice is yours. I prefer to be emailed Straight Away.

Make your choices and press Save



8) Ok, now we need to post the Form on your blog so that users can see this. So create a new Blog Post and make sure you are on the HTML tab. Then simply paste in the embed code that we got at stage 6)

Give the post a title and some introduction text and then press save.

Note: You can change the width="760" height="638" parts of the embed code to suit the size of your blog.


Once done, press publish and your Form should now be on your blog!


And that's it! Users will now see the form and when they submit one you will be sent an email and all their replies will be nicely stored in your Google Spreadsheet.

There is so much more you can do with Forms etc but that will be for another day. I suggest you look at the Suggested Reading below to see what else you can do with Forms.

Alternatives
There are plenty of other systems that you can use. I also use the excellent service from a company called JotForm. They all work in a similar way in that you create a form and they provide you with some code to add to your blog/site.

Further Reading
Google Spreadsheets
Google Forms
Spreadsheet Notifications
Advanced Email Notifications (Thanks to David for the tip!)

I hope you have found this tutorial useful and if you have any questions/problems then please do not hesitate in asking in the comments below.

8 comments:

Tony Simpson said...

Thanks for that, hopefully I can create my own now. Just what I was looking for

DarkUFO said...

Hey Tony Simpson glad you found it useful. If you run into any problems or have any questions feel free to post here in the comments and I'll do my best to help.

Marj said...

Thanks for the great tutorial

tekhnologia said...

Thanks for the tutorial, But I am already using this over http://www.tekhnologia.com but I want some alternative to google Forms.

Maria said...

Thank you = this was excellent

DarkUFO said...

Glad you found it helpful

spinxwebdesign said...

Yes it is a good function of Google doc. I had created the same for one of my blog in the blogger platform. It is really a good function because when someone will fill up the form we will get notification through email and in addition all data will be maintained in the excel sheet of Google doc.

joey said...

in addition all data will be maintained in the excel sheet of Google doc.
2N7002