A how-to guide on avoiding spam while still putting your e-mail address on your website.

The problem

You want to make yourself easy to contact - your email address should be linked on your webpage:

However, experience shows that email addresses are quickly and irreversibly harvested by programs trawling the web looking for them. The result is a deluge of spam, with your sales opportunities, valuable contacts and so on lost in the mire.

Although modern anti spam filters are very good (I use Google Apps for my domain), they are not flawless. Anyway, that kind of thing gets my goat. Why shouldn't I put my email address on my own website, after all?

Other solutions

Replacing parts of the email address

It's common to see solutions like the following:

However, a half-intelligent program could still harvest that, and your customers are now a few clicks and keypresses away from sending that vital email.

Using images

Instead of putting a text email address, put a picture with the email address inside it. Your customers still many clicks and keypresses from emailing you - they have to type in your address in full. Techniques that allow spam bots to recognise your email address from a picture exist (although I wonder how many harvesters bother, there are so many easy to get addresses out there).

CAPTCHAs and related techniques

Designed to test whether the visitor is a human or a computer, these visual tests (Wikipedia article) are inaccessible to partially sighted or blind visitors, and arguably put your customers even further away from contacting you.
Alternative approaches use other "Turing tests" like asking simple questions. These still force visitors into many clicks or keypresses, and are language and culture specific.

Contact forms

Instead of publishing your e-mail address, you could put a text field and let people type in a message, pressing "Send" within your web page. This is OK but is also liable to hacking and another kind of spam - whereby the automatic program submits spam data masquerading as a real user.

Solution at www.rmorrison.net

You can see this in action on my Contact page.

It relies on the fact that harvesters don't execute Javascript. Yes, sorry purists - the solution relies on Javascript. I have a <noscript> alternative, of course. Javascript is very common, and this solution has none of the disadvantages of the others, so this is my preferred way. Feel free to comment down below!

I put my email address and precious contact details in a Javascript file, then use a commonly available routine to "scramble" it. When the page loads, the browser's Javascript engine runs and uses document.write to put the link into the page. Real visitors get a nice link and can email you with one click. Harvester bots get some dummy text.

How to do it

In your HTML page, instead of a link with your email address, put this:

<span id="email_display">(hidden)</span>
<noscript>Sorry, your browser doesn't support Javascript.
My email address is: me (at) my (dash) website (dot) com.</noscript>

That's what the bots will see. I've had to revert to old school replacement for non-Javascript browsers. Now, in your favourite editor, write a bit of code:

document.getElementById('email_display').innerHTML = '<a href="mailto:me@my-website.com">me@my-website.com</a>';

Don't put this on your webserver! It contains your e-mail address in plain text. Instead, run one of the available utilities to pack or obfuscate the code. e.g. Javascript obfuscator. Ensure that your email address isn't contained in the result, and put the result into a script tag on your page. It should look like this:

<script>
var _0xa7ba=["\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x65\x6D\x61\x69\x6C\x5F\x64\x69\x73\x70\x6C\x61\x79","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x6D\x61\x69\x6C\x74\x6F\x3A\x6D\x65\x40\x6D\x79\x2D\x77\x65\x62\x73\x69\x74\x65\x2E\x63\x6F\x6D\x22\x3E\x6D\x65\x40\x6D\x79\x2D\x77\x65\x62\x73\x69\x74\x65\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E"];document[_0xa7ba[2]](_0xa7ba[1])[_0xa7ba[0]]=_0xa7ba[3];
</script>

To prove it works, have a look on my Contact page. And no, I don't get spam!