The trouble with the JavaScript solutions is that people with JS turned off will also not see the email address. Albeit a minority you need a combination of techniques for the best results.
Many of these techniques are detailed here, but I have provided the solutions only: https://www.ionos.co.uk/digitalguide/e-mail/e-mail-security/protecting-your-e-mail-address-how-to-do-it/
Comments
<p>If you have any questions or suggestions, please write an e-mail to:
us<!-- abc@def -->er@domai<!-- @abc.com -->n.com.
</p>
Hidden Spans
<style type="text/css">
span.spamprotection {display:none;}
</style>
<p>If you have any questions or suggestions, please write an e-mail to:
user<span class="spamprotection">CHARACTER SEQUENCE</span>@domain.com.
</p>
Reverse Strings This may not be friendly for multilingual sites.
<style type="text/css">
span.ltrText {unicode-bidi: bidi-override; direction: rtl}
</style>
<p>If you have any questions or suggestions, please write an e-mail to:
<span class="ltrText"> moc.niamod@resu</span>.
</p>
JavaScript as in many other answers
<script type="text/javascript">
var part1 = "user";
var part2 = Math.pow(2,6);
var part3 = String.fromCharCode(part2);
var part4 = "domain.com"
var part5 = part1 + String.fromCharCode(part2) + part4;
document.write("If you have any questions or suggestions, please write an e-mail to:
<href=" + "mai" + "lto" + ":" + part5 + ">" + part1 + part3 + part4 + "</a>.");
</script>
ROT13 Encryption JavaScript dependant but also helps with GDPR as it's encrypted.
<script type="text/javascript">
function decode(a) {
return a.replace(/[a-zA-Z]/g, function(c){
return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13)
? c : c - 26);
})
};
function openMailer(element) {
var y = decode("znvygb:orahgmre@qbznva.qr");
element.setAttribute("href", y);
element.setAttribute("onclick", "");
element.firstChild.nodeValue = "Open e-mail software";
};
</script>
<a id="email" href=" " onclick='openMailer(this);'>E-mail: please click</a>
CSS Only Borrowed from here: Protect e-mail address with CSS only
<!doctype html>
<html>
<head>
<title>Protect e-mail with only css</title>
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>
</body>
</html>
Google actually provides a service for this. Free to use and works pretty well: Mail ReCaptcha
Put your email address on a transparent image in png or gif format and display that image on your web pages. Only a human reader would know the image is showing an email address. This will prevent bots from finding your email address on your website.
I've been using CloudFlare's free Email Address Obfuscation feature: https://support.cloudflare.com/hc/en-us/articles/200170016-What-is-Email-Address-Obfuscation-
Email harvesters and other bots roam the Internet looking for email addresses to add to lists that target recipients for spam. This trend results in an increasing amount of unwanted email.
Web administrators have come up with clever ways to protect against this by writing out email addresses (i.e., help [at] cloudflare [dot] com) or by using embedded images of the email address. However, you lose the convenience of clicking on the email address to automatically send an email.
By enabling Cloudflare Email Address Obfuscation, email addresses on your web page will be obfuscated (hidden) from bots, while keeping them visible to humans. In fact, there are no visible changes to your website for visitors.
To prevent unexpected website behavior, email addresses are not obfuscated when they appear in:
- Any HTML tag attribute, except for the
href
attribute of thea
tag.- Other HTML tags
- Any page that does not have a MIME type of "text/html" or "application/xhtml+xml"
I'm not affiliated with CloudFlare. I just appreciate all that they offer for free.
In the past I have seen this done with javascript. Basically you assign the email address to javascript variables and change the contents of an element using these. You can also provide a fallback for users with javascript disabled which points them in the direction of a form if you need to. Here's an example
var user = 'foo',
domain = 'bar.com',
element = document.getElementById('email');
element.innerHTML = user + '@' + domain;
//OR
//'<a href="mailto:' + user + '@' + domain + '">Email</a>'
This way bots never see the email address as they do not load javascript.
I use email encoders like http://www.wbwip.com/wbw/emailencoder.html . Just put your address to the source and between the "a" tags. Something like this
<a href="mailto:info@example.com">info@example.com</a>
It is encoding of info@example.com