How to Add a Google Docs Contact Form to Your Blogger Blog

A lot of people have jumped on the WordPress or the Tumblr train, but there are still quite a number of people holding out on Blogger. Google is keeping up with the Joneses with its new Blogger in Draft interface, and the blogging service still provides a cheaper alternative for total customization and original domain names for personal (and even professional) blogs.

As a Blogger user, you may have occasionally wondered, “How can I make one of those cool contact forms that all the other blogs in the world seem to have?” Fortunately, if you also happen to use Google Docs, this can be achieved with relative ease.

1. Creating the Form

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

Note: 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,...), 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 to save it.

2. Ripping the Form

You may already know that Google forms tend to stick to non-customizable templates that often don’t mesh at all with your blog’s design. Sure, there’s the option to embed the form using an iFrame code, but it still retains the same format as the pre-designed cookie-cutter templates. Luckily, 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. By the way, this spreadsheet will allow you to see all the submissions to your form. When you get to this page, select “Form” on the menu bar and then click “Go to live form“.

When looking at your form page, you should use whatever feature your browser allows for looking at the source code of the page. 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“. (If you are using Firefox, you might want to get the Firebug add-on.)

Right now, things might get a bit 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 the following code:

Remember where this line of code is, and then find this next bit of code:

</script></div>

Copy everything from the first mentioned line of code down to the next mentioned line of code. If you would feel more comfortable pasting this code in a text app, then do it. You will be using it shortly.

3. Installing the Form

After copying the selected code to your clipboard, you should sign in to your Blogger dashboard. For this tutorial, I am using the Blogger in Draft interface, but if you are using the original user interface, you will still be able to follow along.

First, 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 from above.

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

4. Customizing the Form

Sometimes there will arise problems such as there being too much space between the page title and the form itself or the answer box being too wide 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 the following line of code:

By simply 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.

In this post I have shown you a quick and efficient way to place a style-matching Google Docs form on your Blogger blog, and the tutorial could easily 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 your document and the customization for a little while.

Good luck!