How To Add A Google Docs Contact Form To Blogger

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.


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.

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“.


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“.


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.


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.

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.