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.
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.
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:
- Fill in carefully the sign-up form with your respective details
- 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
- 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.
- 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.
- Login to your account on Blogger. Once onto your Dashboard, click New post
- Switch to Edit HTML mode and enter a proper title like Contact Me
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.
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
- Give visitors what they want
- Making it quick and easy for you to bookmark and earn traffic
- Could blogger beat wordpress?
- The proper way to write code in your blog posts
- how to keep the everlasting blogging love
- Generate all the fun stuffs for your blog
Wow, this is fab..I had tried 2 other contact forms from different providers but this one worked the best. What’s more your directions on “how -to” are straight forward enough that anyone can follow them..thanks!
Thanks you very much for this, tried it and it worked. Nice and easy to follow. Thank you
WOww!! Great job!!
[...] Contact form for your blogger blog [...]
Thanks for the tutorial! It worked for me! fringereporter.blogspot.com
The sign up form is not working
Most probably you would not be reading this message, but I would still like to thank you for posting this excellent article. It was very easy to put that comment form on my blog after your excellent and detailed articles. The pictures did certainly help a lot.
Thank you once again.
Thank you for the help! great simple contact form.
Thank you. Great job on creating a simple contact form.
[...] how-to contact form for blogger | BlogoSquare [...]
[...] how-to contact form for blogger | BlogoSquare [...]
thanks for your informations
[...] ways to do it (besides just listing your email address). If you use Blogger, you could check out these directions. Or just come up with your own. Totally up to you. But you never know when someone might visit your [...]
unoriginatedness trusten archcupbearer ripeness leptodactylidae recable synthesis evilspeaker
Regime Botanicals
http://www.kingsmat.com/
Thank you for this! Bless you!
Works great, cheers!
Just wanted to say thanks for your help. The form looks & works great. =)
hello friend, I do not know where that faiz the register the website in the form designer. I already downloaded the program that faiz, I need to do more to take the register the ID get there you could ask me where do I do about the register. making favour thank you very much.
[...] how-to contact form for blogger [...]
[...] will not go into detail on how to generate a contact form like the above. Instead, you can read read this detail tutorial on adding a contact form in your Blogspot [...]
It doesn’t work now! Help me!