Pinterest Stumbleupon Whatsapp
Ads by Google

google docs blogMany of you have likely jumped on the WordPress or the Tumblr train, but there is still a number of people holding out on Blogger. Google is keeping up with the Joneses with its new Blogger in Draft Blogger Finally Gets An Overhaul With New Dashboard & Features [News] Blogger Finally Gets An Overhaul With New Dashboard & Features [News] Read More interface, and the web tool still provides a cheaper alternative for total customization and original domain names for personal blogs.

If you are a Blogger user, you may have occasionally wondered, “How can I make one of those crazy-cool contact forms that all the other blogs in the world have?” Fortunately, if you are also a Google Docs user, this can be done with relative ease (and absolutely no pain).

Making The Form

To begin, log in to Google Docs, and create a new form as shown by the image below. You can punch in a title for your form to keep yourself organized, but you could actually leave this section of your form as “Untitled” and it wouldn’t make any difference. In order to make it a legitimate contact page, you should provide users with the “paragraph text” question type. This allows enough room for lengthy questions or comments.

google docs blog

google docs blogger

Please take note that the default form automatically inserts two sample questions. Make sure to delete the second sample, or else you will have a phantom inquiry that you don’t really need. However, if you want to add more questions using different answer formats (checkboxes, multiple choice, etc.) then you are free to do so. You can even make the answers required for items such as contact details. After you are done, make sure you remember to save it.

Ads by Google

google docs blogger

Ripping The Form

You may already be aware that Google forms tend to stick to non-customizable templates that often don’t mesh well with your blog’s design. Sure, you can embed the form using an iFrame code, but it still retains the same format as the pre-designed cookie-cutter templates. Thankfully, there is a way around that.

After completing your form, go back to your Docs homepage and open up the spreadsheet of the form you have just created. As a side-note, this spreadsheet will allow you to see all the submissions to your form. When you arrive on this page, select “Form” on the menu bar and then click “Go to live form“.

google docs blogger

While looking at your form page, you should use whatever feature your browser allows for looking at the page source code. Since I am using Chrome on my Mac for this tutorial, I merely used my trackpad to open the contextual menu and selected “View Page Source“.

google docs on blogger

Right here, things might get tedious, so pay close attention. You should use the Find function of your browser (CTRL + F) to locate the term “form action“. When you find it, you should see this code:

<div class="ss-form><form action="YOUR_FORM_URL" method="POST" id="ss-form">

Make a note of where this line of code is, and then find this next bit of code:

</script></div>

Copy all the way down from the first mentioned line of code to the next mentioned line of code. If you would feel more comfortable pasting this code in a text app, then go ahead. You will be using it momentarily.

Installing The Form

After you have successfully copied your selected code to your clipboard, you should go into your Blogger dashboard. As I said before, I am using the Blogger in Draft interface, but if you are using the original UI, you will still be able to follow along.

First off, you should create a new page for your blog and entitle it “Contact Me” or something similar. After opening it, go directly to the HTML editing section of the page and paste the code.

google docs on blogger

google docs on blogger

As of now, you have basically completed the task of installing the form on your blog. At this point, your preview should look similar to the image below. However, previews are going to be different for different people based on the machine they are using.

Customizing The Form

As I discovered with my personal blog, sometimes there will be problems such as there being too much space between the page title and the form itself or the answer box being too big for the width of the blog. These minor problems can be easily fixed.

If you are having issues with there being too much space between the title and the questions, search for any

br

tags and delete them. However, if you are having issues with the width of the answer box, search for this line of code:

<textarea name="entry.0.single" rows="8" cols="75" class="ss-q-long" id="entry_0">

By adjusting the “cols” value to a lesser number, you can change the width of the blog to suit smaller screens or alternate browsers. Furthermore, you can actually change the fonts of the questions while editing the page. With enough customization, you can end up with something like the following image.

google docs blog

Conclusion

This is a quick and efficient way to place a style-matching Google Docs form on your Blogger blog, and the tutorial could likely be adapted for any other blog or website. You can do a lot more than what you see here, so make sure you play around with it for a little while.

What other sites do you use to make web forms? How did this tutorial work out for you?  If you have any problems making your own web form, let us know in the comments or alternatively ask a question over at MakeUseOf Answers answers answers Read More .

  1. Arijit Upadhyay
    November 8, 2011 at 7:39 am

    I checked this out and there seems to be one problem, the response page opens in same windows with some blank comments from Google docs and no navigations bars of original site. This might confuse the visitors.

    A way out could be add : target="_blank" in form action like this:

    This this in use here: http://www.hairtransplantationindia.com/p/contact-us.html

    • J. Lockhart
      November 12, 2011 at 7:08 pm

      Well, Arijit. If this works, then it works. I typically never used the navbar from the original site, so I didn't even notice that it went away! I'm not entirely sure what you mean by the blank comments, though. Could you elaborate?

  2. Daniel
    October 22, 2011 at 12:22 am

    Helpful information, Joshua.

    I am still with Blogger, though,  looking at making the big move over to WordPress.

    I have to admit that Blogger(Google) have made some great additions to Blogger,  in recent times.

    Blogger has included other functions which just require a few workarounds (Tweaks) .

     

    • J. Lockhart
      October 22, 2011 at 7:19 am

      In my opinion, Blogger is wonderful, Daniel. I recently switched to WordPress because I was needing something a little different, but as far as just having a personal blog, Blogger is fantastic. 

      It took me a while to make the switch (since this article I have, obviously), and I kept roughly the same design as my old blog. However, both are fairly easy to use.

  3. Dr. Vikrant Yadav
    September 21, 2011 at 6:38 am

    Very usefull...... Thankss alot !!!

    • J. Lockhart
      September 21, 2011 at 3:25 pm

      Good to know!

  4. Emm
    September 17, 2011 at 10:13 am

    Awesome, excellent article!  I took advantage of the ability to add in a little message so I copied from slightly above where you suggested but it is working perfectly.

    • J. Lockhart
      September 21, 2011 at 3:25 pm

      I may actually test that out myself, now that you mention it!

  5. Uth Video
    August 27, 2011 at 4:47 pm

    I don't understand - if you paste the code in a new post, it shows up as though it's a new blog post. Do I have to create another blog page in order to be able to do this? I thought I could just have a contact button that would link to this form. 

    • J. Lockhart
      August 27, 2011 at 6:04 pm

      You could always do the contact button which links to the form's site, but in order to use this method, you need to create another blog page instead of a blog post. Does that help?

  6. J. Lockhart
    August 17, 2011 at 5:06 pm

    I can definitely see where JotForm would be easier. I like the table format for receiving answers with Google Docs, though. Any other recommendations?

    • Ardsmeuk
      August 17, 2011 at 5:59 pm

      no other recoms for now since I found that one. hardly to believe what you get for free. so seems a good deal to me.

  7. Shabeer Ibm
    August 17, 2011 at 8:07 am

    Thanks for sharing ..I wanna make one for my blog asap

    • J. Lockhart
      August 17, 2011 at 5:07 pm

      Go for it. Keep me updated, and I'd love to take a look.

  8. Hassan Voyeau
    August 17, 2011 at 12:45 am

    Much better than exposing your email to spam.

    • J. Lockhart
      August 17, 2011 at 4:48 am

      That's what I thought. I have a separate email for my personal blog, so I don't mind giving it out to people. However, I use a similar version of this form for people to send in blog post ideas. It's pretty cool stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *