Monday, June 16, 2008

Contact Form for blog or website: Avoid email harvester and spam

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 form

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


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>


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.

53 comments:

  1. Hello Peter,

    First 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???

    ReplyDelete
  2. Hello,

    Peter, 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

    ReplyDelete
  3. Whoa! worked for one day then their bandwidth was exceeded.

    ReplyDelete
  4. Hi d'cute...

    Nice 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)

    ReplyDelete
  5. Well if so, it's OK. I'll be waiting for further information from you. Hope it will be soon.

    ReplyDelete
  6. Hi peter,
    I 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.

    ReplyDelete
  7. Hi Peter,
    It is Lanna again. It is my mistake. I see the contact form after I clicked one of link. Thanks.

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

    ReplyDelete
  9. i sthere any way in which without using any website ...we can design a contact form which sends mail directly to us...

    ReplyDelete
  10. Thanks Peter!!
    I found out your tutorial from Kontactr FAQ :))
    My Kontactr now beautifully embedded on my site http://faithship.blogspot.com

    ReplyDelete
  11. the gap between the post and form now solved. thanks to you. it looks good here www.timugon.com

    ReplyDelete
  12. How can I remove the comment form then?

    It will be odd f we have comment form in our contact form page.

    ReplyDelete
  13. as usual , very useful info. by the way seems kontactr is up and running.

    ReplyDelete
  14. Thank you for the information. This is great. It worked like a charm.

    ReplyDelete
  15. lady_from_avon@yahoo.com

    ReplyDelete
  16. Thanks....that was easy and useful info....

    ReplyDelete
  17. ThnXs!!! I was looking for something like this. I'm very grateful for your help ;)

    ReplyDelete
  18. Hi Peter,

    This 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?

    ReplyDelete
  19. Try using a different browser (preferred) or clearing cache and cookies. See why you should have more than 1 browser

    ReplyDelete
  20. Hello Peter sir,
    I want a 3 column template.
    I need your help
    actresshotseen.blogspot.com

    ReplyDelete
  21. after a year i again, let me see if this works for me. Otherwise i was using googledocforms

    ReplyDelete
  22. This was VERY confusing. You never put how to add the form using AJAX.
    Also, how do you direct the form to you selected email account inbox?
    Where do you put that bit of html?

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

    ReplyDelete
  24. Have you tried http://aliveprojects.com/apps/contactemailer/how-to-install-contact-form-in-your-blog

    If you like it, many will use it

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

    ReplyDelete
  26. Are you saying you have problems generating the codes for the contact form?

    ReplyDelete
  27. Well, 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.

    ReplyDelete
  28. I've responded to you via email.

    ReplyDelete
  29. Hi, 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

    ReplyDelete
  30. Kontactr 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.

    ReplyDelete
  31. hi...
    just 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...

    ReplyDelete
  32. This is an example of the mail header:

    from 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

    ReplyDelete
  33. so that means i do not have to compose a separate email right...

    ReplyDelete
  34. "compose a separate email"

    What separate email? You just reply to the message that's all.

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

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

    ReplyDelete
  36. "hitting reply button it will go to the original sender right.."

    Yes but since you are so unsure of yourself, why not cc to that email you want it to go to to make doubly sure?

    ReplyDelete
  37. Or perhaps create another email address if you do not have more than one then test yourself?

    ReplyDelete
  38. Hi,

    I have developed a gadget for the contact form. This will be available in blogger very soon. Check my blog http://webmanin.blogspot.com/

    ReplyDelete
  39. 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!

    ~chanda stehlik
    www.onecraftymommy.com

    ReplyDelete
  40. Peter,

    It 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

    ReplyDelete
  41. I am afraid I would not know. However it does not bother me as my there is nothing to hide in my email communications

    ReplyDelete
  42. Hi..

    Really 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

    ReplyDelete
  43. Really Thanks for this post, that was easy and useful information.
    Form Samples

    ReplyDelete
  44. 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.
    http://www.simplifiedlawofattraction.com/p/contact-me_07.html
    Thank you
    Slavica Bogdanov

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

    ReplyDelete
  46. hey thats work on my web.....

    http://www.digitalfacts.net

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

    Thank you very much.

    ReplyDelete
  48. Getting this error on testing contact form ...

    Not 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 ?

    ReplyDelete
  49. Are you referring to my contact form while trying to reach me or to a contact form you tried to install for yourself?

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

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics