Methods to hide email addresses on webpages

by

Putting an email address on a website, for example on your website’s “contact” page or in a forum is a sure way to end up with email spam.

There are several methods to hide or obscure the email address from spammers searching for new email addresses to spam, however they all come at a cost to the real people you want to see the email address.

Before putting email addresses on a web page, consider an alternative way for people to contact you, for example:

  1. An online “contact” form – Gravity Forms is an awesome choice for creating a contact form on WordPress websites
  2. Temporary “burner” email addresses – there are many services just Google search “burner email”
  3. If you use gmail – modify the address with +text (where text is any word of your choosing)- for example [email protected] — you’ll still get the email but you can block as soon as it starts to get spammed.

If none of these options are suitable, here’s a number of ways you can hide email addresses on webpages.

Regardless of how you go a good spam filter is a must.

CSS – change text direction

This method involves writing the email address backwards then using the CSS to change the text direction.

This is likely to be quite effective – but the email address will not be clickable.

For example
moc.elpmaxe@resu

<span class="backemail">moc.elpmaxe@resu</span>

<style>
span.backemail{
     unicode-bidi: bidi-override;
     direction: rtl;
}
</style>

CSS – display none

This method involves adding additional text to the email address then using CSS to hide it.

This is likely to be quite effective – but the email address will not be clickable.

For example
[email protected]

us<span class="hiddenemail">nospam</span>[email protected]

<style>
span.hiddenemail{ 
     display:none; 
} 
</style>

JavaScript encryption

This method uses ROT13 encryption so that the email on the page is encrypted until JavaScript on the page runs.

This assumes that the spammer is just ‘scraping’ the webpage for content – not viewing it, not running JavaScript.

There are two big disadvantages here – users that do not have JavaScript enabled will not see the real email address and the email address with not be clickable.

It also requires you have have a the ROT13 encoded version of the email address – which you can get from websites like rot13.com or using server side functions like str_rot13() in PHP.

For example

<script>
 document.write("<n uers='znvygb:[email protected]'>[email protected]</n>".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
 </script>

Replace @ with AT and . with DOT

This method involves replacing characters with how they would be read out loud.

This method is HIGHLY INEFFECTIVE.

For example

userATexampleDOTcom

Building with JavaScript

There is many different ways to do this and it can be highly effective, but all require the user to have JavaScript enabled.

Many examples can be found on Stack Overflow

http://stackoverflow.com/questions/483212/effective-method-to-hide-email-from-spam-bots

Replace @ and . with HTML entities

This method involves replacing that @ and . characters with their HTML entity code.

This method is moderately effective and still allows the users to click on it.

For example

<a href="mailto:user&#064;example&#046;com">user&#064;example&#046;com</a>

Splitting email with other words

This method involves inserting words inside of the email address.

Whilst this might be effective, it’s also annoying to read and doesnt give a clickable email address.

For example

[email protected]

 

Plain text

This method is just writing the email address as plain text – no encoding or modifying. 

The theory is that because it’s not a link the spammers won’t see it as an email address – but this is a false assumption.

For example

[email protected]