Add contact us form with spam protection to your blog

Your blogger blog platform can be very limited if you don`t know how to add extended features. Remembering the old wise MC Giver making bombs out of chewing gum I was motivated to research how to add an secure and nice looking contact us form directly inside the blog post.

As we all now you cant play much inside the editor so we have to use some tricks to get to our final goal. In this tutorial you will find everything step by step to make your own contact us form.



First things first, get over to emailmeform and register for a free account. These guys will host your contact form.

Now login and click on "create new form" on the left menu.
Step 1: Fill in your details, under website field place any web page as we are going to change this later and leave the number of fields to default 4.
Step 2: Leave everything on default or translate to your domestic language
Step 3: Leave everything on default except message columns and rows. You need to tweak this a bit to make it fit on your template, I have 40 columns and 5 rows this would be the best fit for most blog templates.
Step 4: Leave everything on default except image verification field. You can change the background color of the spam protection form if you like.
Step 5: Leave on default
Step 6 : You will se an preview of your form here, click on finish.

Now you will be presented with the form code, copy just the url to the form code into a plain text editor (here in red) :

<a href="http://www.emailmeform.com/fid.php?formid=26905" target="_new">My Contact Form</a>

Click on forms list on the left menu and click on edit. Now you will be taken to step 1. Under web site code paste the previously to notepad copied form url and click on next till finish.

Get to your blogger admin panel and click on posting/create to create a new post. Make sure you work in the edit html mode. To display the form inside a post we have to use the outdated but still sometimes useful iframe technique.

Paste the following iframe code into your editor and change the red form url to yours.

<iframe src="http://www.emailmeform.com/contact_webmaster_fid-26905.html" name="frame1" scrolling="no" frameborder="no" align="center" height = "325px" width = "500px">
</iframe>


You might need to edit height and weight to create the best fit for your template.

Save and enjoy :)

Preview my contact form here

Tags: blogger contact us form, contact us tutorial, CAPTCHA Protection