Hot Topics: Download free themes , Download free stuffs , Free problogging resources

how-to contact form for blogger

A contact form provides an easy way for visitors to get in touch with you from your blog itself. Visitors fill in their details like name and mail and write their message before submitting it. The whole is delivered to your mailbox without you divulging your mail address thus keeping off from spammers. I’ll here show you, users of the blogger platform how to get a contact form for your blog in just a few simple steps.

blogger

We’ll create a normal blog post which will contain your contact form code. To deliver the messages to your mailbox, the processing is done by a free service called WebFormDesigner.

contact form for blogger

First we need to associate your contact form with your email address, the one where your messages will be delivered. We’ll do this by creating a free account at WebFormDesigner and proceeding as follows:

  1. Fill in carefully the sign-up form with your respective details
  2. Make sure to enter the mail address where your messages will be delivered to under the Where to send your form data field. This mail address will be associated with your contact form on blogger
  3. Moving down the form to the Redirect field, enter your homepage address/URL. This is where your visitors will be taken after the message has been successfully sent.
  4. Tick to agree to the terms of service and click the Register Me! button.

You will now receive an email in your mailbox asking you to confirm your account. After successfully confirming it, you will receive another mail with your Form ID. The Form ID is what links your contact form to your mail address and provide the proper identification to WebFormDesigner to send the message. So make sure to save this somewhere carefully.

That’s all to do with WebFormDesigner. Infact you won’t have to get there again so we’ll start with the serious stuffs on your blog at blogger.

  1. Login to your account on Blogger. Once onto your Dashboard, click New post
  2. Switch to Edit HTML mode and enter a proper title like Contact Me

blogger template

In the post area, copy and paste the following code:


<form name="Contact" action="http://www.webformdesigner.net/wfd_f2.php?id=FORM ID" method="post" enctype="application/x-www-form-urlencoded">
<p><label for="Sender">Name:</label>
<input name="formName" size="40" type="text"></p>

<p><label for="Mail">Email:</label>
<input name="formMail" size="40" type="text"></p>

<p><label for="Message">Message:</label>
<textarea name="formMsg" rows="10" cols="40"></textarea></p>

<center><input value="submit" type="submit">

<input name="resetBtn" value="reset" type="reset"></center>
</form>

Replace the FORM ID in the first line of the above code with your Form ID(the one you got after creating your account at WebFormDesigner). Just like this :

from 


<form name="Contact" action="http://www.webformdesigner.net/wfd_f2.php?id=FORM ID" method="post" enctype="application/x-www-form-urlencoded">

to


<form name="Contact" action="http://www.webformdesigner.net/wfd_f2.php?id=z4FykJg6cY" method="post" enctype="application/x-www-form-urlencoded">

with the FORM ID code in place. Look carefully where it should be placed.

You can remove the Readers Comments and Backlinks to make things feel nice around by checking the boxes under the Post Options, just like in the picture below.

blogger post option

Publish the post

You now have a fully working contact form which your visitors can use to reach you painlessly. To give them a quick link to your great contact form, get to the contact form post and note its link/address(looking up at the address bar of your browser). Paste the link somewhere in your sidebar where it’s easy to notice. The coding for your link should be like this : 


<a href="link to contact form post" title="contact me">contact me</a>

You can see a demo version of the above contact form here. The above code will give you a basic contact form which you can further style to your likings and to the design of your blog until it tastes good. Feel free to drop your comments for any questions and information you would like. I would be too glad to help you getting your great contact form in place. Just there to make you within the reach of your visitors. Please share around to anyone who would need this.

related reading

« Technorati is cloning Digg
Web 2.0 … The Machine is Us/ing Us »

71 Responses so far

« Older Comments