Adding an email address to a website is a useful way to allow customers to make contact. Unfortunately, it’s also a way for “spam bots” – programs spammers use to collect email addresses from websites – to harvest the email address to send unsolicited messages or advertisements.
Ecommerce merchants have several options to hide or obscure that email address from spam bot programs and still make it accessible and user-friendly for customers. Below is a listing of some of the more popular methods and simple step-by-step instructions on how to employ them, each one progressively more hidden, or “obfuscated.”
Plain Text
The most common way to embed an email link into a page is by using this simple HTML code below, generally referred to as “plain text”:
<a href="mailto:example@abc.com">example@abc.com</a>
On screen this appears as a clickable link, reading: example@abc.com.
This method allows for visitors of a site to simply roll a cursor over and click on the email address provided. Generally, this automatically opens up a visitor’s email management program like Microsoft Outlook or Mozilla Thunderbird with the email address already copied.
Plain text, although the simplest and most user-friendly, provides no obfuscation.
Written Text
Instead of displaying the actual email address on the web page, merchants can write a simple phrase like “Send a message” for a method that is both user-friendly to read and adds a layer of hidden protection from spammers. So, an email address that actually looks like this: “example@abc.com” will read like this on screen “Send a message.”
The HTML code for this example is below:
<a href="mailto:example@abc.comcom" title="Send a message">Send a message</a>
On screen, this appears as a clickable link reading: Send a message.
This provides a thin layer of obfuscation and is just slightly better than the “plain text” method.
JavaScript
Another common method is to use JavaScript. Spam bot programs scan web pages for email addresses, but the programs cannot run embedded JavaScript code. In other words, the harvesting program just views the text of a page. So, by using this JavaScript code, the email address isn’t technically part of the text portion of the webpage.
In the example below, “Email Address” is the visible link text and when clicked the hidden email appears copied in the user’s email management program, ready to send.
<script>document.write('<a href="mailto:example@abc.com”>example@abc.com</a>);</script>
On screen, the link would look like this: example@abc.com.
ROT13 Encryption
“ROT13” may sound scary, but it’s a simple and effective way to add a more sophisticated layer of obfuscation. Put simply, ROT13 or “rotate by 13 places,” replaces each letter in a given piece of text by a letter 13 places further along in the alphabet, wrapping back to the beginning of the alphabet if a letter is towards the end.
Only letters that occur in the alphabet are rotated. Spaces, symbols and other characters are left unencrypted. For example, the letter “a” would be replaced by the letter “n” – 13 places over in sequence.
Once the email address has been encrypted, an additional step needs to be taken in the HTML code to make the address user-friendly again. We used two free online tools to complete this task – an online ROT13 encrypting site and a free JavaScript repository site. We used Jsfromhell.com’s free JavaScript code repository to find our code.
There are several ROT13 encrypting tools online, including Tornio.info, Rot13.com or Arantius.com. For this example, we used the Tornio.info “ROT13 JavaScript coder/decoder” tool. Follow the following steps to use ROT13 and JavaScript to hide an email and embed it into the source code of your webpage.
- Type in the plain text of the email address to be encrypted into the first field on screen. Be sure to include the text “mailto:” before the email for the HTML code step later on. It should look something like this when typed out: mailto:example@abc.com. In this example, the online ROT13 encryption generator automatically encrypts and displays that email address in the second box on the page, as the original text is typed. Encrypted, it looks like this: znvygb:rknzcyr@nop.pbz.
- Next, copy and paste the free JavaScript code obtained from Jsfromhell.com. This code will allow you to create a clickable link button so the obfuscation is completely hidden from user view, but spam bot programs will find the encrypted email when attempting to harvest an email address from your site. The encrypted email address is in bold below, already entered into the JavaScript code:
<script type="text/javascript">
document.write("<n users="znvygb:rknzcyr@nop.pbz" query="absbyybj">Fraq n zrffntr</n>".replace(/[a-zA-Z]/g,
function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
</script>Send a message</a>
This code above will create a link that cleanly reads Send a message on your website.
Contact Forms
Avoid obfuscation code and email-address exposure altogether with a website contact form, where email addresses are not displayed at all and customers can easily make contact, leaving a name, email address and message that merchants can respond to when necessary.
There are several contact form generators available, including Foxyform.com, 123ContactForm.com or Email Me Form, all off which help users build custom forms.
Merchants can simply sign up for a contact form service, choose the desired fields (name, email address and message are the most common), follow the on-screen instructions, and the HTML code for the contact form is generated. Merchants can then copy and paste the code into the website source code.