Stop spammers from getting the email address from a mailto link have been quite difficult, despite the fact that there is a lot of solutions out there, they often are not so effective.

After digging into Google and Stackoverflow I found the solution that works best for me. This May not be 100%, if there is anything 100% against spams, although is pretty elegant and smart. Enjoy! 🙂

The main idea is to hide the email completely, so bots around would not find the ready email, we will be using JS for sending the email and CSS for display it.

We will be using data HTML attribute to break the email in 3 parts, name, domain and tld (top-level domain).

We will get all these 3 parts together and use the mailto inside the onclick function, see the example below:

<a href="#" 
   title="send me an email"
   class="email" 
   data-name="lorem" 
   data-domain="ipsum" 
   data-tld="com" 
   onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld; return false;">
</a>

and for displaying the email on the page we would simple use the pseudo element which allows you to insert content onto a page from CSS and than make reference to the data attributes from the HTML element:

.email:after{
    content: attr(data-name) "@" 
             attr(data-domain) "." 
             attr(data-tld);
}

I know that putting the onclick within an anchor link would offend those who believe strongly in separation of content from behavior/action, although this is a pretty elegant solution that may help you if you do not have much time to think in a complex cryptography.