IMPORTANT: Codes below are for email to my email address. You will have to generate your own codes for your own contact form.
The standard HTML mailto: code
<a href="mailto:email@abc.com">
to create a hyperlink to contact you is prone to email harvesting for spam. It is better to use a contact form for this purpose if you want your blog or website visitor to email you. The best I found so far is Kontactr.com. Update 28 September 2008: Looks like kontactr.com is no longer available (no permission to access server). We will have to find another way/
To get a contact form for yourself to embed in your blog or website, sign up for an account. After verification and login, you will have 2 scripts (code of widget) for embedding. One is HTML code and one is AJAX. I recommend you use the AJAX code as it is simpler and you will have less work. Instructions for both will be given below after the examples:
Explanation and screen shots of various methods to get a Kontactr form
You can see an example of Kontactr contact form using the HTML widget in its original form at Kontactr Contact Form using original HTML code where there is a huge blank space above the form. An example of a contact form using the edited Kontactr HTML code can be seen at Dream Driven LifeTM contact formExample of contact form using Kontatr AJAX original script is given at Kontactr contact form using original AJAX code. Example of contact form using the edited AJAX code is at Natural Remedies contact form.
Explanation and Instructions for Kontactr contact forms
HTML code or widget
Below in the scroll box is Kontactr original HTML code for the contact form (Important note: the script below is a script for a contact form which send mail to my email inbox. You will have to go to kontactr.com and generate your own script.:<form method="post" action="http://kontactr.com/euser.php">
<input name="id" type="hidden" value="5142" />
<table cellpadding="10px" border="0" style="font-size: 13px; font-family: Tahoma, Verdana;">
<tr>
<td align="right">Your Name : </td>
<td><input name="sender_name" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Your Email : </td>
<td><input name="sender_email" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Subject : </td>
<td><input name="subject" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right" valign="top">Message : </td>
<td><textarea rows="10" cols="40" name="message" style="font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;"></textarea></td>
</tr>
<tr>
<td align="right" valign="middle">Image (case-sensitive): </td>
<td><img src="http://kontactr.com/captcha.php" /> <input type="text" name="captcha_code" style="margin-bottom: 10px; font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="send" type="submit" id="send" value="Send" style="font-size: 18px; width: 100px; letter-spacing: 5px;" /></td>
</tr>
</table>
</form>
<input name="id" type="hidden" value="5142" />
<table cellpadding="10px" border="0" style="font-size: 13px; font-family: Tahoma, Verdana;">
<tr>
<td align="right">Your Name : </td>
<td><input name="sender_name" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Your Email : </td>
<td><input name="sender_email" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Subject : </td>
<td><input name="subject" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right" valign="top">Message : </td>
<td><textarea rows="10" cols="40" name="message" style="font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;"></textarea></td>
</tr>
<tr>
<td align="right" valign="middle">Image (case-sensitive): </td>
<td><img src="http://kontactr.com/captcha.php" /> <input type="text" name="captcha_code" style="margin-bottom: 10px; font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="send" type="submit" id="send" value="Send" style="font-size: 18px; width: 100px; letter-spacing: 5px;" /></td>
</tr>
</table>
</form>
If you paste this direct into a Blogger blog post editor window and publish, you will get that contact form with a huge blank space above the contact form. This is because Blogger treat each "return stroke" (like clicking ENTER or RETURN key to type something on the next line) as a space. Since there are so many "spaces" (code in different lines) in the original HTML code, you will then have lots of empty lines above the contact form.
To get rid of the blank space, copy-paste the HTML code into Wordpad (available from Windows Accessories), on the first line, click the END key to put the mouse cursor at the end of the line. Click DELETE to bring the next line up to the first line. Then click END and DELETE again. Keep repeating this until you come to the end of the code. You will then have only a single line of code. I suggest you save this Wordpad file into, say, a folder named "email address" so you can use it whenever needed.
After getting the HTML code into a single line, press ctrl+A to select the whole code, click ctrl+C to copy into clipboard. Go to the Blogger post editor and click inside the post editor window. Press ctrl+V to paste the single line HTML code into the post editor window. Publish. You will not have any space above the contact form this way.
If you think the above is too troublesome, there is an alternative where you just need to surround the Kontactr code with a simple inline CSS. For details refer to How to avoid blank space above table Part 2.
AJAX code or widget
An example of the original Kontactr AJAX code for the contact form is given in the scroll box below (Important note: the script below is a script for a contact form which send mail to my email inbox. You will have to go to kontactr.com and generate your own script.:<script type="text/javascript"> id = 5142; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>
Note that it is only 2 line of code. You can either copy-paste direct the AJAX code into your Blogger post editor window and publish or you can edit it into a single line of code as explained above before copy-pasting. Both will give excellent result.
Hello Peter,
ReplyDeleteFirst of all, I wanna ask you for permit if I republish your posts in my blog. Can I??? Then as pay back I will link back to you.
The 2nd how to make an email notifications, if someone left the url box blank? It is amazing I think... It is not blogger.com default setting isn't it???
Hello,
ReplyDeletePeter, first of all I wanna ask you somthing. I am developing my blog in http://thom-online.blogspot.com/ then I wanna pick some of your posts to be re-published in my blog. Then as my pay back, I will link back to you. Can I do it freely?
Then the 2nd, How to make email notification if someone left the url-box blank?? Like you did to me? It's amazing I think..
That's all. Thank you. Maybe I will be back with ather questions... :D
thom
Whoa! worked for one day then their bandwidth was exceeded.
ReplyDeleteHi d'cute...
ReplyDeleteNice of you to ask, but please do not do it yet. I need to find out how search engines treat duplicate content. Our blogs may be penalized for duplicate content. Wait till I get more information.
Peter Blog*Star
Blogger FAQ (Frequently Asked Questions)
(Blogger FAQ in progress. More will be added as I have the time)
Well if so, it's OK. I'll be waiting for further information from you. Hope it will be soon.
ReplyDeleteHi peter,
ReplyDeleteI often visit your site. Most of the time by Googling and found your site. Thank you for helping your visitors out.
About the contact form, I wish somewhere you could show it to us. So we can get a general idea of how it turns out to be.
Hi Peter,
ReplyDeleteIt is Lanna again. It is my mistake. I see the contact form after I clicked one of link. Thanks.
Thank you very much. It works very well. I appreciate your advice about how to get rid of the spaces above the table html code on blogger, I try to fix this problems long time ago but did not success, good luck to meet your blog.
ReplyDeletei sthere any way in which without using any website ...we can design a contact form which sends mail directly to us...
ReplyDeleteThanks Peter!!
ReplyDeleteI found out your tutorial from Kontactr FAQ :))
My Kontactr now beautifully embedded on my site http://faithship.blogspot.com
the gap between the post and form now solved. thanks to you. it looks good here www.timugon.com
ReplyDeleteHow can I remove the comment form then?
ReplyDeleteIt will be odd f we have comment form in our contact form page.
You can't
ReplyDeleteas usual , very useful info. by the way seems kontactr is up and running.
ReplyDeleteThank you for the information. This is great. It worked like a charm.
ReplyDeletelady_from_avon@yahoo.com
ReplyDeleteThanks....that was easy and useful info....
ReplyDeleteThnXs!!! I was looking for something like this. I'm very grateful for your help ;)
ReplyDeleteHi Peter,
ReplyDeleteThis doesnt work at all. I am testing it on my site and it keeps telling me i am putting in the wrong Captcha code when i have triple checked what i have entered. I have been messing with it all day and i am about ready to give up and try another site.
Please can you tell me if you ever have problems with your one?
Try using a different browser (preferred) or clearing cache and cookies. See why you should have more than 1 browser
ReplyDeleteHello Peter sir,
ReplyDeleteI want a 3 column template.
I need your help
actresshotseen.blogspot.com
Refer to 3 column Minima template or 3 column templates
ReplyDeleteafter a year i again, let me see if this works for me. Otherwise i was using googledocforms
ReplyDeleteThis was VERY confusing. You never put how to add the form using AJAX.
ReplyDeleteAlso, how do you direct the form to you selected email account inbox?
Where do you put that bit of html?
Just put the codes into the Blogger post editor and publish just like any ordinary post. An alternative will be to put it into a HTML/Javascript gadget, but in this case you will have to ensure the contact form box fit the width of whichever part of the sidebar/footer/etc.
ReplyDeleteHave you tried http://aliveprojects.com/apps/contactemailer/how-to-install-contact-form-in-your-blog
ReplyDeleteIf you like it, many will use it
Hi Peter. I just found your site tonight and it has been very helpful. I'm wondering if you can help me. I posted a contact form for my husband's blog and tried to test it out. It keeps telling me I put in an invalid e-mail address, even when I KNOW it's correct. I even tried my husband's e-mail...no dice. Is there a trick to that part? I will tell you that I have no experience in HTML at all, but was able to make my own form by copying some of the text and putting in my own desired info, but I did not mess with the e-mail address code. Any ideas? Thanks so much! ~Chanda
ReplyDeleteAre you saying you have problems generating the codes for the contact form?
ReplyDeleteWell, I'm not really sure. It seems I made the form okay (maybe), but when it's filled out, it goes to a page from Kontactr that says, "Invalid E-mail Address" (meaning the one I filled in to contact me, pretending I was a customer). Does that make sense? I know that e-mail address was correct.
ReplyDeleteI've responded to you via email.
ReplyDeleteHi, i try to used kontactr.com but i have some problem in capchta , when i try to sen email, and enter the capcta , always error code , why ? please help me
ReplyDeleteKontactr have been informed about this problem with captcha and they say they are working on it. In my case, what I did was to offer alternatives. Look at my edited Contact form. Perhaps you can do the same.
ReplyDeletehi...
ReplyDeletejust a small question...
suppose it someone contacts me through Kontactr form and if i hit the reply button (gmail) and reply to the same email, will my reply be reach to the person who contacted me through this form...???
or do i need to copy his email address and compose a separate email...
please let me know about this...
This is an example of the mail header:
ReplyDeletefrom Mr. X <no-reply@kontactr.com>
reply-to "Mr. X" <mrx@gmail.com>
So when one reply to the above it goes to mrx@gmail.com
so that means i do not have to compose a separate email right...
ReplyDelete"compose a separate email"
ReplyDeleteWhat separate email? You just reply to the message that's all.
with "compose a separate email" i meant that whether i need to copy the email ID of the sender who sent me a message using contact us form and then compose a new email by pasting that copied ID...
ReplyDeletei think u r trying to say that if i reply to the same mail by hitting reply button it will go to the original sender right...
"hitting reply button it will go to the original sender right.."
ReplyDeleteYes but since you are so unsure of yourself, why not cc to that email you want it to go to to make doubly sure?
Or perhaps create another email address if you do not have more than one then test yourself?
ReplyDeleteHi,
ReplyDeleteI have developed a gadget for the contact form. This will be available in blogger very soon. Check my blog http://webmanin.blogspot.com/
Peter, I'm so sorry I've taken so long to get back to you. It was one of those things where I've asked a ? and then forgot to whom and where I've asked it! I need to keep better track. Thanks so much for your response. I never rec'd an e-mail from you (if that was directed at me), otherwise I definitely would have responded. Thank you so much for your reply about Kontactr. I'll have to look into that. Thanks again!
ReplyDelete~chanda stehlik
www.onecraftymommy.com
Peter,
ReplyDeleteIt work great,thanks. My question is is there a security concern with this? I mean is this communication viewed and stored by Kontactr?
Thanks
teobak@yahoo.com
I am afraid I would not know. However it does not bother me as my there is nothing to hide in my email communications
ReplyDeleteHi..
ReplyDeleteReally this is so helpful tome. Since I was searching for a contact form to embed in my blog. I am going implement the code you have given..Tahnks a lot.
--RedS - http://techtter.blogspot.com
Really Thanks for this post, that was easy and useful information.
ReplyDeleteForm Samples
hello Peter, Thank you for all your help. I want to put a contact form on my blog but, when I did, on my page the bottom of the blogger cuts most of my contact form. Do you know how I can change that.
ReplyDeletehttp://www.simplifiedlawofattraction.com/p/contact-me_07.html
Thank you
Slavica Bogdanov
Send the code for the contact form to me for testing via my contact form. Perhaps you may may to try other contact forms like what you see in my contact form by other third party providers.
ReplyDeletehey thats work on my web.....
ReplyDeletehttp://www.digitalfacts.net
This is awesome. I really appreciate your efforts to provide us this useful tips..I was sent from http://kontactr.com/ to this place on the issue of using kontactr with blogger and i enjoyed what i saw here.
ReplyDeleteThank you very much.
Getting this error on testing contact form ...
ReplyDeleteNot Found
The requested URL /user/http://mcx-advisory.blogspot.com/ was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 mod_fcgid/2.3.5 Phusion_Passenger/2.2.15 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at kontactr.com Port 80
So what do i do ?
Are you referring to my contact form while trying to reach me or to a contact form you tried to install for yourself?
ReplyDeletethis is great i like it
ReplyDeleteSEO INDIA
Ofcourse ! Contact Form is a mandatory to all the site/blog not only so that people get in contact with you but also i guess there are other things like advertising/guest link and things like this which will be useful to us in various ways !
ReplyDelete