What’s the best method out of these three to hide an email address yet still have it function but still display the correct email address to the user and have it function as a mailto: link when clicked on? (Using Wordpress site in this case)
2A. USING THE ‘ONCLICK’ EVENT
You can create a regular mailto hyperlink for your email address but replace some of the characters – like the dot and the @ sign – with text. Then add an onclick event to this hyperlink that will substitute the text with the actual symbols.
<a href = “mailto:johnATgmailDOTcom”
onclick = “this.href=this.href
.replace(/AT/,‘@’)
.replace(/DOT/,‘.’)”
Contact Me
2B. RANDOM ARRAY
Split your email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.
- WORDPRESS + PHP
If you are on WordPress, you can also consider using the built-in antispambot() function to encode your email address. The function will encode the characters in your address to their HTML character entity (the letter a becomes a
and the @ symbol becomes @
) though they will render correctly in the browser.