Protect all your email addresses on your website from being harvested by spammers

By Dr Alex

The other day I went to a site recommended by a friend. At first it seemed great: it was fast to load and the service was just what I was looking for, but I had a question. A quick page scan didn't give me their email, and scrolling to the bottom of the page didn't help either. No "Contact Us" or "About Us" links anywhere.
I finally found their email after following the "Company Profile" link and scrolling to the bottom of the page. I clicked on the email and - nothing happened! To protect their email from being harvested by the spammers, they had it displayed as an image.

I had to click on Show Desktop, crank Eudora, and switch back and forth to type in the email address. I sent my question...

... only, the next day it came back with "Recipient not found" - most likely I mistyped or missed a letter somewhere. By now I was not in the mood to go back to their site to check the spelling of their email address and never got to order their services.

Companies like this one lose customers every day because they do not make it easy enough to contact them.

Don't let it happen to you - you should always keep the communications channels open. This is especially true for small to medium enterprises, which need to win their clients' trust and build rapport. It will also give you much needed feedback to improve your website, goods and services.

Your contact information should never be more than one click away. As the very minimum, your contact information needs to have:

  • Your postal address (not a P.O. box)

  • Your phone and fax numbers

  • Your email address, and

  • A contact form that your visitors can fill-in online.

And your email address should be clickable, never an image.

But spammers will harvest your email address
and bombard you with messages...

True, spammers' spiders are on the prowl all the time - harvesting emails from every site they stumble upon. If you just display your email you can soon thousands of spam messages will be clogging your inbox.

The trick is to use JavaScript to display your email address. This way your customers have an easy way to contact you, and your email is safe from spammers.

Let's say that the email you want to show is MyEmail@MyCompany.com. You can add it to your page in two steps:

Step 1: Fire up your JavaScript Editor (or some other editor) and enter the following piece of code In the Head section of your page (between the <head> and </head> tags):

< script language="JavaScript">
function OpenEmail(box)
{
  domain=
"MyCompany.com";
  document.write(
"<a href=\"mailto:"+box+ "@"+domain+ "\">"+box+"@"+domain+ "</a>");
}
</script>

Step 2: In the Body section of your page (between <body> and </body> tags), where you want your email displayed, enter the following:

<script language="JavaScript">OpenEmail('MyEmail');</script>

That's it! Your email will be visible and clicking on it will open the email client. At the same time, no spiders will be able to parse it, so it is perfectly safe from spammers. 

JavaScript is easy to learn and allows you to transform your static web pages to live, dynamic applications. You can use it for anything from form validation and credit-card checking to games, special effects and animations. Just a few KB of JavaScript can make your site look very appealing.

There are thousands of JavaScript files on the Internet that you can use for free to enhance the functionality of your website. It pays off to have at least minimal knowledge of JavaScript so you can use the free scripts.

Learn JavaScript quickly and easily through a hands-on experience

 
The alternative way of showing your email using DOM methods

Modern JavaScript tends to avoid document.write() and relies on the Document Object Model (DOM) metods instead. Here is the complete source code:

  <head>
 
  <script type='text/javascript'>
 
  function contactMe( me, domain, linkText )
  {
      if ( !domain ) { domain = 'MyCompany.com'; }
      if ( !linkText ) { linkText = 'Contact me'; }
      var anchor = document.createElement( 'a' );
      var email = me + '@' + domain;
      anchor.setAttribute( 'href', 'mailto:' + email );
      anchor.appendChild( document.createTextNode( linkText ) );
      return anchor;
  }
 
  window.onload = function()
  {
      document.getElementById( 'contact' ).appendChild( contactMe( 'MyName' ) );
  }
 
  </script>
  </head>
 
  <body>
  <table align='center'>
  <tr>
  <td id='contact'>
  </td>
  </tr>
  </table>
  </body>
  </html>
 

To see this example:

  1. Run JavaScript Editor and copy-and-paste the code above
  2. Save the file as Examle.htm, and
  3. Click on Show Internal Viewer to preview the page.

Putting it all together

Failing to make it easy for your visitors to contact you will discourage them from buying your products/services. Your contact information should never be more than one click away. Use JavaScript in your web pages to provide your email address while hiding it from spammers' robots from harvesting it for their messages. JavaScript is an easy and efficient solution for creating dynamic web content, be it form validation and credit-card checking, or games, special effects and animations.

About the author