Twitter
RSS
I personally feel that a good contact page should display your email address, even if you are using a contact form, and I’m sure a lot of you out there agree with me on this. Having said that, here is a simple way to display your email address in a safe, or at least safer, way hiding it from evil spam bots but displaying it to your visitors with the use of JavaScript.
A spam bot will check your source code looking for email addresses. We just need to make sure there aren’t any there for it to steal. Now you could choose not to type out your email address at all in your source code or you could type out something that is readable by humans but doesn’t look like an email address to the bots. Keep in mind that if you don’t type out anything in your source code visitors with JavaScript turned off (although a very tiny percentage) or screen readers won’t have access to your email address, and this is neither good usability or accessibility. This is why it’s better to type out something that makes sense to humans but not the spam bots, even though it would be safer not to.
It’s become quite common to replace “@” with ” [at] ” and “.” with ” [dot] ” when typing out your email address on the net. This way I can type out my email address like farid [at] faridhadi [dot] com which is readable to humans but doesn’t look like an email address to the bots.
You could just wrap that up in a mailto link and be done with it but that would just mean that you are letting the bad guys win, so don’t! It’s bad usability! Your precious visitors will have to manually replace ” [at] ” with “@” and ” [dot] ” with “.”. Instead, lets use some good JavaScript and make it a nice, user-friendly link, not letting your visitors experience any inconvenience and letting them comfortably send you an email.
If you have a look at my “Contact Me” page you’ll see the line “Use the form below to get in touch with me or send me an email at [my email address]” where [my email address] is a fully functional mailto link. Now, if you have a look at the source code of the same page you’ll see “Use the form below to get in touch with me or send me an email at <span id=”hidden”>farid [at] faridhadi [dot] com</span>”. This replacement is done with JavaScript, and since it is, the source code will be left as it is. This means the spam bots will see farid [at] faridhadi [dot] com, and hopefully not recognize it as an email address, whiles my visitors will see my email address as a nice little mailto link.
Let me show you how it’s done!
The markup for this is simple, as I’ve already shown you above.
Use the form below to get in touch with me or send me an email at <span id="hidden">farid [at] faridhadi [dot] com</span>
Now all we need to do is get the element with ID “hidden” and replace it’s contents with my email address in a mailto link. Here is the JavaScript I wrote to take care of that, making sure not to type out the email address in its full form by creating a variable and adding the markup to it bit by bit. This way the bots should not be able to figure out that it’s an email address.
<script type="text/javascript">
var str='<a ';
str+='href';
str+='="mailto';
str+=':farid';
str+='@';
str+='farid';
str+='hadi.';
str+='c';
str+='o';
str+='m"';
str+='>farid';
str+='@';
str+='farid';
str+='hadi.';
str+='c';
str+='o';
str+='m<';
str+='/a';
str+='>';
document.getElementById('hidden').innerHTML=str;
</script>
As you can see, the function is very simple and straight forward. This technique works fine if you need to protect a single or just a few email address that you know, like in the case of a contact page. You can easily add more addresses by adding multiple spans in your markup with an id that increases for every address like hidden-1, hidden-2 and so on and updating the JavaScript to replace them as your situation requires.
Does this technique have any weaknesses?
According to me, the only weakness is the fact that we are typing out the email address as foo [at] bar [dot] com and since it’s become quite common to do so the bad guys will probably, if they haven’t already, teach their evil bots to recognize that as an email address.
I’ll let you know if I start getting spammed after this post =)
What are your thoughts on this? Do you use another technique to display your email address? Do you try to protect it at all? Share your thoughts with us in the comments.
