Thursday, May 14, 2009

How to Add a "Contact Me" Form to your Blog (or Website) without exposing your Email Address

A long time ago, it was common practice to simply put your email address on the web using a mailto url link. Unfortunately, this practice results in a ton of spam coming your way courtesy of spambots.

A Potted History of Methods
Over the years, a lot of different methods for getting around this problem have become available. These include the low tech methods, such as having text which reads "send email to myaccount at hotmail dot com" and needs to be reinterpreted by the reader.

The use of escape codes (try for an example), and several other ways of encoding the address in javascript.

No method has been more successful than simply giving people a blank form to write their email in. Now, in Lotus Notes/Domino, this is simplicity itself but when it comes to html, you need to write a bit of code - and even then, you need to be careful not to expose anything on the web.

Getting External Help
It makes no sense to reinvent the wheel when there's a free service available.

Kontactr ( is a service which allows you to pop up a form on your site for email. You receive the email within minutes and the only caveat that I've found so far is that they include a small advert at the end of the email being sent to you. The users of your site don't get presented with Ads.

Procedure (for Blogger)
  1. Go to the Kontactr site and register.

  2. Open your blog and click Layout, then Page Elements then Click Add a Gadget.

  3. Google will pop up a dialog box for you to select the appropriate gadget. Choose the HTML/Javascript Gadget. (note: If you haven't had a browse through these gadgets, you really should - there's some fantastic stuff there).

  4. You will now be prompted to put some code into the box. Switch back to the tab that you have Kontactr open on and choose either the embed widget or the buttons code. You may need to experiment to see which code works best for your site.

    As a general rule, the Embed widgets are best used in the middle of the page while the buttons are best in a navigation menu.

  5. Copy the code from Kontactr and paste it into your google gadget.

  6. From here on, it's just a matter of clicking Save a few times..

  7. You might want to preview your blog before saving it though - and you might want to consider dragging your new gadget around to a more suitable place on the page.
That's it.
These gadgets never cease to amaze me.

No comments: