how-to contact form for blogger

February 6th, 2007 by Hans

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

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">


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

66 responses so far ↓

1 Anonymous Feb 6, 2007 at 11:15 pm

how-to contact form for blogger…

A simple and concise how-to guiding you in getting your own contact form for your blog on blogger. Visitors can now contact you without you divulging your mail address on your blog….
2 Revka Feb 7, 2007 at 6:18 pm

Hey, this sounds like a great tool, but I am not getting it to work. Can you take a look to see if it is something I am doing? Thank you. Heer’s the link.
http://ourfamilyporch.blogspot.com/2006/11/contact-me.html
3 Hans Feb 7, 2007 at 8:25 pm

@ Revka

hello Revka, thanks indeed for your visit on my blog. Hope the article was easy to grasp.

first, the link you gave me sends me an error page. Haven’t you published the post as said above?

Make sure you have followed the steps : get your Form ID > create a post that will be your contact form on blogger > copy above code and paste in post > publish everything > make post link available to visitors.

To make things easier, I’ve uploaded a text file that contains the exact code as it is. Don’t forget to replace the Form ID with yours. See it’s here.

do tell me if everything works, I’ll be happy to provide you help.
4 Revka Feb 8, 2007 at 12:00 am

Hi, Hans,

First, I received your comment at my blog and replied there, but I wanted to say that I hope the paid blogging opportunity works for you. I really love it.

Second, I wish to apologize for the link not working. I HAD published the post, but when it didn’t work right, I went back and saved it as a draft, forgetting that you needed it to be active in order to be able to view it! My abject apologies!!!

Third, I tried using the code for which you provided a link in your comment, and this time it worked correctly. So I still don’t know if it was just me the first time, but I am happy to report that this attempt worked. Thank you so much! This is much better than putting my e-mail address out there for everyone to find. I’ll be recommending this post, and I’ll be looking around your blog, too. Thanks a million!
5 Hans Feb 8, 2007 at 3:04 pm

@ Revka

thanks for your patience in getting it up infact I’ve edited the post to include a line that says you should omit some spaces…etc… but I think I should just tell you congrats I just sent a mail through it to test it. Hope you receive it. Yeah that’s a great idea recommending others. I heard lots of bloggers who complained about their increased spams in their inbox and I tried helping in some way I could : the above post.
6 Revka Feb 8, 2007 at 7:18 pm

Was that the problem - extra spaces? Well, silly me! See, I said I was new to this. You were a great help, and I just published my post about this so I hope you get plenty of traffic from it. That was a good itdea to add the extra instruction lin in the post. Again, thank you so much.
7 Anonymous Feb 9, 2007 at 5:45 pm

Google…

Google is the best search engine…
8 Hans Feb 9, 2007 at 8:17 pm

@ Revka

thanks for spreading the word
9 Kyu Feb 10, 2007 at 2:25 pm

Thats Hans-kun for you! So smart, yet he doesnt even realize he just found out his solution for a wp 2.1 contact form….
BTW brought ya a new visitor
10 Mauritius Blog Tracker Feb 14, 2007 at 4:55 pm

form was not displayed. I would therefore recommend you the Secure and Accessible PHP Contact Form that works smoothly with the 2.1 version. See a working version at my contact page. If you would like something easier,copy here and paste there, my how-to contact form for blogger is a must(Thanks to Kyu for reminding me). Follow the instructions that will guide you in putting the appropriate code and you should be up with a great contact form in seconds. If you’ve got any more solutions concerning the contact form issues,
11 Contact form for Wordpress 2.1 Feb 14, 2007 at 8:55 pm

[…] version at my contact page. If you would like something easier,copy here and paste there, my how-to contact form for blogger is a must(Thanks to Kyu for reminding me). Follow the instructions that will guide you in putting […]
12 Hans Feb 14, 2007 at 9:09 pm

@ kyu

thanks for reminding me pal…..and for presenting me your friend…..Hey infact there’s now a working contact form plugins for 2.1. It’s highly customisable and it comes with different theme. Cool ain’t it?
13 Squarelab Feb 18, 2007 at 6:16 pm

see this great how-to
14 Nym Feb 19, 2007 at 1:46 pm

What !!!! How have I been able to miss this wonderful post !!!
I have to this as soon as I get home !
15 Nym’s Blog Feb 21, 2007 at 2:23 pm

Hans l’a super bien expliqué
16 Hans Feb 21, 2007 at 7:00 pm

@ Nym

can’t wait to see it running on your blog you can further customise the way the form gets displayed, some css there would help. If you need help in this part, gotta tell me

thanks for going through
17 Nym Feb 22, 2007 at 1:05 pm

:cry: :cry: Pourquoi ça marche pas !!!!
Je me suis inscrite sur WebFormDesigner. J’ai reçu mon ID. J’ai fait le post avec le formulaire que tu as donné (et il s’affiche comme il faut ).
Mais quand je teste le formulaire et que je clique sur envoyer, voilà ce qu’il me dit :
Warning: fsockopen() [function.fsockopen]: unable to connect to mail.webformdesigner.net:25 in /home/webnet/public_html/class.smtp.php on line 105
Message was not sent

Mailer error: SMTP Error: Could not connect to SMTP host.

Pourtant j’ai mis une adresse valide. Tu sais d’où ça vient ?
(désolée d’avoir répondu en français )
18 Nym Feb 22, 2007 at 3:51 pm

Bizarre, maintenant ça marche…
Enfin bon, le principal c’est effectivement que ça marche
19 How To Make It Work Feb 22, 2007 at 8:09 pm

Blogger Contact Form Wordpress 2.1 Contact Form I also would like to take the opportunity to apologize for my long absence due to my holiday but I am back now and very excited to continue on my making money online via blogging journey
20 Kumiko Feb 26, 2007 at 2:16 pm

Thank you so much for the comment on my site! I’ve added the contact form to it!

Kumiko
xo
21 Sania Wyatt Feb 27, 2007 at 9:04 pm

I’m having trouble signing up with webformdesign! Their page is not loading!
22 Sania Wyatt Feb 28, 2007 at 4:36 pm

Thnx for your prompt reply!
23 Sania Wyatt Feb 28, 2007 at 6:13 pm

It worked perfectly! Mauritians are the best!
24 Jennybrat Mar 1, 2007 at 8:11 am

Thanks, I got the form working and even incorporated it in my template! Do you know where I can get help on backlinks? I read Blogger Help many times and can’t figure out why mine are not working.
25 Hans Mar 1, 2007 at 1:26 pm

@ Sania Wyatt :

great do contact me if you need help about it anytime

thanks for your visit…hope you liked it…
26 Hans Mar 1, 2007 at 1:31 pm

@ Jennybrat

try checking this page….and any interesting stuffs in it that might help you on backlinks….

do tell me if that works…..else I’ll get into it myself lol
27 Culture Shiok! Mar 6, 2007 at 7:03 pm

Just what I’ve been looking for!

Will let you know if I can make it work on my blog.

Thanks!
28 Culture Shiok! Mar 6, 2007 at 7:05 pm

How about a comment page for Blogger?

One of my reader is complaining that Idont have a proper comment page or something. I don’t know how to make one.
Do you how?
29 Hans Mar 8, 2007 at 3:56 pm

@ Culture Shiok! :

Nice you liked it… as for a more featured pump comment’s page, see HaloScan and tell me whether that works

thanks for your comments.
30 el hardie Mar 29, 2007 at 3:59 pm

it’s great
31 Angie Mar 29, 2007 at 4:12 pm

Thanks so much for the step-by-step info!! I’m working on a new blog and wanted a form but hated the way the HTML form I made worked. This is much better!! Great post!!
32 Contact form for the Blogger platform [0 Responses] at 9rules Technology Notes Apr 8, 2007 at 4:40 pm

[…] would surely testify the vital importance of a contact form for a blog so I came up with one for the blogger platform. It presents your visitors to a form that they can use to send you their sweet words and feedbacks […]
33 The Porch Light: Creating a “Contact Me” form Apr 9, 2007 at 7:37 pm

[…] since I love it, I thought I would generously share my source with you. Visit Han’s post titled how-to contact form for blogger at BlogoSquare. I could not get the code provided in the post to work for me, but when I let Hans […]
34 Growing Growing Gone: Digg This And Then Ban Exxon Mobile Apr 13, 2007 at 9:21 pm

[…] your visitors an easy way to get in touch with you by providing them with a great contact form. See here, how-to.Hope you’ll really like it and it will have its uses for […]
35 Quick shooting stats of your Wordpress blog — BlogoSquare Apr 22, 2007 at 1:43 pm

[…] how-to contact form for blogger […]
36 a click to more feed subscribers — BlogoSquare Apr 24, 2007 at 5:20 pm

[…] how-to contact form for blogger […]
37 The proper way to write code in your blog posts — BlogoSquare Apr 25, 2007 at 11:35 pm

[…] how-to contact form for blogger […]
38 French 2.0, French answer to 9Rules — BlogoSquare Apr 28, 2007 at 3:41 pm

[…] how-to contact form for blogger […]
39 how-to : IM within your browser — BlogoSquare Apr 30, 2007 at 1:16 pm

[…] how-to contact form for blogger […]
40 More fun with random picking of post in Blogger and Wordpress — BlogoSquare May 1, 2007 at 12:50 pm

[…] how-to contact form for blogger […]
41 bla.st, a card directory to blast your online presence — BlogoSquare May 17, 2007 at 9:02 pm

[…] how-to contact form for blogger […]
42 The most rocking wordpress theme just got a revamped update — BlogoSquare May 28, 2007 at 8:34 am

[…] how-to contact form for blogger […]
43 Give visitors what they want — BlogoSquare Jun 1, 2007 at 12:18 pm

[…] how-to contact form for blogger […]
44 Mehmet Akyuz Jul 5, 2007 at 4:07 pm

Thank you, that’s a cool tutorial…
45 Greg Aug 9, 2007 at 11:14 pm

Thanks for posting this info. Exactly what I needed! Very appreciated.
46 Earn Money with Your Contact Form Aug 10, 2007 at 9:01 am

[…] up a contact form on a blog can be very simple, wordpress has plugins for some and blogger also has solutions. On a static website some basic HTML will allow you to set one up then you can start earning money […]
47 GroundFloorSEO.com | Top SEO Blogs & Bloggers » Earn Money with Your Contact Form Aug 13, 2007 at 5:33 am

[…] up a contact form on a blog can be very simple, wordpress has plugins for some and blogger also has solutions. On a static website some basic HTML will allow you to set one up then you can start earning money […]
48 Illuminous Aug 28, 2007 at 4:40 am

How do you change the background color in the form fields? My site has a black background, and the white is just blinding. Help!
49 Xacur Sep 3, 2007 at 6:31 pm

Man, this works great, thanks, and it’s easy to understand.
50 Link And Earn Oct 4, 2007 at 6:53 am

Thanks a lot . That was a great tip. Works fine.

Cheers
51 Deborah Oct 7, 2007 at 11:50 pm

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!
52 Slim Dynamics Dec 2, 2007 at 8:08 am

Thanks you very much for this, tried it and it worked. Nice and easy to follow. Thank you
53 lordrowin Dec 10, 2007 at 9:03 am

WOww!! Great job!!
54 Best of 2007: The Best 17 Sites To Get Your Blog Bling « Freelancing, My Road Less Traveled Dec 28, 2007 at 8:03 am

[…] Contact form for your blogger blog […]
55 Fringe Reporter Jan 4, 2008 at 10:12 pm

Thanks for the tutorial! It worked for me! fringereporter.blogspot.com
56 cool Jan 18, 2008 at 3:48 pm

The sign up form is not working
57 Varun Jan 22, 2008 at 6:44 pm

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.
58 Anonymous Feb 7, 2008 at 6:43 pm

Thank you for the help! great simple contact form.
59 Anonymous Feb 7, 2008 at 6:50 pm

Thank you. Great job on creating a simple contact form.
60 links for 2008-02-21 « PinoyBlurker @ PinoyBlogoSphere.com Feb 21, 2008 at 4:18 pm

[…] how-to contact form for blogger | BlogoSquare […]
61 links for 2008-02-21 « PinoyBlogoSphere.com | PhilippineBlogoSphere.com Feb 21, 2008 at 4:19 pm

[…] how-to contact form for blogger | BlogoSquare […]
62 test Mar 11, 2008 at 6:22 am

thanks for your informations
63 Contact Deficiency Syndrom - Teach42 Mar 24, 2008 at 6:25 pm

[…] 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 […]
64 Tabitha Mccall Mar 25, 2008 at 10:49 pm

unoriginatedness trusten archcupbearer ripeness leptodactylidae recable synthesis evilspeaker
Regime Botanicals
http://www.kingsmat.com/
65 Lance Apr 29, 2008 at 4:47 am

Thank you for this! Bless you!
66 Alan Stanley May 15, 2008 at 4:31 pm

Works great, cheers!

BlogoSquare

Essential problogging resources and downloads