tl;dr
Hide email address from bots without using scripts and maintain mailto:
functionality. Method must also support screen-readers.
Summary
Email obfuscation without using scripts or contact forms
Email address needs to be completely visible to human viewers and maintain
mailto:
functionalityEmail Address must not be in image form.
Email address must be "completely" hidden from spam-crawlers and spam-bots and any other harvester type
Desired Effect:
No scripts, please. There are no scripts used in the project and I'd like to keep it that way.
Email address is either displayed on the page or can be easily displayed after some sort of user interaction, like opening a modal.
The user can click on on the email address which in turn would trigger the
mailto:
functionality.Clicking the email will open the user's email application.
In other words,
mailto:
functionality must work.The email address in not visible or not identified as an email address to bots (This includes the page source)
I don't have an inbox that's full of spam
What does NOT Work
Adding a contact form - or anything similar - instead of the email address
I hate contact forms. I rarely fill up a contact form. If there's no email address, I look for a phone number, and if that's not there, I start looking for an alternative service. I would only fill up a contact form if I absolutely have to.
Replacing the address with an image of the address
This creates a HUGE disadvantage to someone using a screenreader (please remember the visually impaired in your future projects)
It also removes the
mailto:
functionality unless you make the image clickable and then add themailto:
functionality as thehref
for the link, but that defeats the purpose and now the email is visible to bots.
What might work:
Clever usage of
pseudo-elements
inCSS
Solutions that make use of
base64
encodingBreaking up the email address and spreading the parts across the document then putting them back together in a modal when the user clicks a button (This will probably involve multiple
CSS
classes and the usage ofanchor tags
)Alterting
html
attributes viaCSS
@MortezaAsadi gracefully brought up the possibility in the comments below. This is the link to the full - The article is from 2012:
Other creative solutions that are beyond my scope of knowledge.
Similar Questions / Fixes
(This a great fix suggested by Joe Maller, it works well but it's script based. Here's what it looks like;
<SCRIPT TYPE="text/javascript">
emailE = 'emailserver.com'
emailE = ('yourname' + '@' + emailE)
document.write('<A href="mailto:' + emailE + '">' + emailE + '</a>')
</script>
<NOSCRIPT>
Email address protected by JavaScript
</NOSCRIPT>
See Question&Answers more detail:os