Hiding your e-mail address in HTML using JavaScript

Lots of people like to be contactable from their websites. And the simplest way of adding your e-mail address is to use the mailto: function.

To do this, you simply enclose the text you wish to turn into the link with a mailto: anchor, like this:

<a href="mailto:joe@joebloggs.com">E-mail Joe</a>

This gives you a clickable link that will open your website visitor's own e-mail program and start a new e-mail message to the address joe@joebloggs.com, like this:

E-mail Joe

Nice and easy, yes? Well, yes. But it has one very major drawback - unscrupulous persons can (and do) use robot software that searches HTML files on the internet for any intances of mailto:, and even for any instances of the @ symbol. They then read the e-mail address that's stored there in the code and collect it for selling to spam-generating e-mail address lists. In other words, use a mailto: and you can expect to start getting unsolicited e-mails within minutes. (The other drawback, of course, is that the mailto: is useless if your visitor uses a web-based e-mail system like Hotmail).

The alternatives:

There are various ways round this. Some people just disguise their e-mail address by saying something like:

E-mail: joe(at)joebloggs.com

This works because a human being has to read the text and interpret it as an e-mail address. Unfortunately, not everybody will understand what's going on, and there's also the possibility of mistakes creeping in (particularly with longer e-mail addresses), while your visitor remembers your e-mail address and types it manually into their e-mail program. It works, sometimes, but it's a messy solution.

The JavaScript solution:

The first solution that I came up with was to have the e-mail address written up on the screen, but not stored in the HTML. The relevant part of the text on the page was only written there when the HTML page was loaded into a browser. This is done by using JavaScript. Here's how:

Normally, you might write something like this:

<span style="text-align: center;"> <a href="mailto:joe@joebloggs.com">E-mail Joe</a> </span>

To hide your e-mail address and avoid using mailto: code, you'd instead write something like this:

<span style="text-align: center;"> <script type="text/JavaScript" language="JavaScript" src="javascript/emailjoe.js"> </script> </span>

Then, in the folder called javascript, you'd insert a small file called emailjoe.js that goes like this:

//<![CDDATA[
document.write('<a href="mailto:joe@joebloggs.com">E-mail Joe</a>');
//]]>

Now you've got a mailto: that works when people view your web page, but isn't readable by bots! Great! Mind you, while bots may not find your e-mail address and abuse it, people can still see it, can't they? So you're still at some risk from spam. Why not combine this JavaScript idea with a form-to-e-mail script and solve everything?

Going one step further:

If you really want to spam-proof yourself, why not use a form and a form-to-e-mail script? Most scripts of this sort require you to use a hidden field in your form that defines the sending address. In this example (as in Matt Wright's ubiqitous FormMail Script), this field is called recipient. The script therefore calls for the form's HTML to begin something like this:

<form action="cgi-bin/contactform.cgi" action="POST">

<input type="hidden" name="recipient" value="joe@joebloggs.com">

But we can improve on this by substituting the line which defines our hidden field called recipient with the following:

<form action="cgi-bin/contactform.cgi" action="POST">

<script type="text/JavaScript" language="JavaScript" src="javascript/formtojoe.js"> </script>

Then all we need do is create a file in the javascript folder called formtojoe.js that goes like this:

//<![CDDATA[
document.write('<input type="hidden" name="recipient" value="joe@joebloggs.com">');
//]]>

Simple, but effective.

Feel free to copy this idea yourself if you need to, though please consider acknowleging Meticulous Web Solutions on your site if you can, and including a link to our homepage - www.meticulous.org.uk.

© 2006 Meticulous Web Solutions