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.

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.

Instead of spending hours trying to troubleshoot the bugs in your web page code, you could be spending that time producing quality content that draws in more visitors. It’s for this reason that I opt for pre-made widgets and I use script generators whenever possible. At the moment I’m searching for a high quality free contact form that I can use on my writing website to offer my SEO services to visitors. I thought this is a good time to bring along MUO readers on my exploration for the very best free email form generators available, before I make a decision and choose one for my website.

Test #1 – TelePro

TelePro is a UK-based website services company, and on their email form generator page, they provide a very easy and free method to create form-to-email scripts that well let your website visitors contact you through a useful and aesthetically pleasing free contact form.

The submission is one-page on the website with three easy steps. First you provide the “to” and “from” emails, then you create the fields that make up the form, and finally you select the scripting langauge that you would like the form to be generated in. In this case you can choose from ASP, PHP, or Perl (Windows or Linux). Once you submit, you receive the code that you can copy and paste into a PHP, ASP or Perl file right on your website.

In this case there’s a HTML code that you insert into your page, and then there’s a second section for the PHP file that it calls – contact.php. Once you copy the contact.php file into the same directory as your index.php file, and embed the HTML into your blog, you’re done! This is what the finished form looks like.

The script automatically calls “ok.htm” on success or “error.htm” on failure. By replacing these pages in contact.php, you can make the script call whichever pages you like. I also found that it’s not easy to resize the fields (such as a long comment field) – you’d have to edit the HTML itself to customize that. Overall ranking for this generator – 3 out of 5 stars.

Test #2 – Email Me Form

I have to say, when I first came across EmailMeForm.com after seeing it mentioned at MakeUseOf, I was impressed by the design of the website alone. Most other form generator sites don’t give the appearance of a high-end professional website. This is the only one I’ve found that does.

This one is a hosted form where the processing takes place on a different server, although you can select to embed the form on your own site so visitors don’t have to leave your web page. Most other similar services offer only a trial period for hosted form services, but EmailMeForm offers a truly free account with a few limitations – you can only have 5 forms and 50 fields max, and a few insignificant features are missing. For your purpose of adding a single form (or 5) to your site – this account will do it all. Once you sign up, you can log into your account to start creating your forms. In the control panel, click on “Create a New Form.”

The wizard steps you through the simple process of creating your customized form. There’s a dropdown list to select from seven useful field types (including a dropdown list – awesome!) – and you can require and/or validate specific fields.

The form is very easy to customize during each step of the wizard, including introduction and conclusion paragraphs, background and font color and more. The thing I like the most about this web form is that it includes a spam-busting Captcha code. Once you’re through the wizard, just paste the code in your website or on your blog (HTML tab) and you’re good to go! This is how the form appears on my blog:

I love the appearance, and the fact that the embedded Captcha will stop those annoying spam submissions. I rate EmailMeForm a 5 out of 5 stars.

Test #3 – Free Contact Form

The website FreeContactForm.com is a misnomer. While it does offer a free “lite” form you can use for very simple forms, it is primarily set up to sell the professional version. However, for my case, where I just want a very simple contact form, the lite version will do. On the free page, just click on “Download Contact Form Lite,” which will download a zip file containing all of the following files.

All you have to do to configure the form script to work on your site is open “lite_settings.php” and substitute “youremailaddress@yourdomain.com” with your correct email address. Then edit the email subject (the email you’ll receive from the form) and what thank you page you’d like to send your visitor to after they submit the form. Save the file, and then FTP all of the files to your website. You can either use contactform.html as your form page, or you can just copy the HTML into your “Contact Me” blog page, which is what I did here.

This form is also very simple and very easy to install. On the positive side, everything is hosted on your own server, and it’s very slimmed down and simple. On the negative side, in order to customize you need to understand at least the basics about PHP – and if you do, you could practically just write this free contact form yourself from scratch anyway. But for beginners who want to learn – it’s a good tool. I give this free tool 4 out of 5 stars.

Final Decision

After testing each of these three free contact form generation tools on my blogs, I’ve decided to go with EmailMeForm simply because I like the professional feel of the site, the fact that I have a cool control panel where I can go to create new forms or customize old ones, and I really don’t need more than 5 forms anyway.

Did I make the right choice? Do you know of any other great, free form generation tools out there? Share your insight in the comments section below!