Emre Tosunkaya

How to Hide & Obfuscate your Email Address on Websites

You want to include your email address on your website so that people can contact you quickly, but you are concerned that doing so would result in a deluge of spam reaching your inbox.

Your worry is reasonable. If your email address is displayed in plain text, email harvesting bots that use basic regular expressions will almost certainly find it. However, you can fool the less intelligent bots by concealing your email address using straightforward CSS and JavaScript techniques.

1. Hide Email through CSS

1a. CSS pseudo-classes

You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com.

To place the email username and domain name on either side of the @ sign, use CSS’s ::before and ::after pseudo-elements. While browsers display the whole email address, which in this example is john@gmail.com, bots, which are typically oblivious to CSS, will only see the @ sign.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user);
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com">@</my-email>

Update: Here’s another version that makes the entry more obscure since the ”@” symbol is also inserted through the pseudo element.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com"></my-email>

The drawback of the aforementioned strategy is that consumers will have to manually type in your email address because they can’t choose and copy it from the website.

The “@” sign is the only email character that isn’t selectable, so if you’d rather utilize pseudo-elements with a more user-friendly style that permits selection, you can try this alternative method.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>

1b. Reverse the direction

You can use the unicode-bidi and direction CSS attributes to tell the browser to show the text in the opposite (or correct) direction after writing your email address backwards (for example, john@abc.com becomes moc.cba@nhoj). The text can be chosen, but the address would copy backwards.

<style>
  .reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
  }
</style>

<!-- write your email address in reverse -->
<span class="reverse">moc.cba@nhoj</span>

1c. Turn off ‘display’

To fool spam bots, you can add extra characters to your email address. Then, using the CSS ‘display’ property, you can present your genuine email address on the screen while concealing all the extra characters.

<style>
  #dummy {
    display: none;
  }
</style>

<!-- You can add any number of z tags but they'll stay hidden -->
john<span id="dummy">REMOVE</span>@abc<span id="dummy">REMOVE</span>.com

2. Obfuscate Email through JavaScript

2a. Using the ‘onclick’ event

You can build a standard mailto hyperlink for your email address, but you’ll need to use text in place of some of the letters, such as the dot and the @ symbol. Then give this hyperlink a onclick event to replace the text with the actual symbols.

<a href = "mailto:johnATgmailDOTcom"
   onclick = "this.href=this.href
              .replace(/AT/,'&#64;')
              .replace(/DOT/,'&#46;')"
>Contact Me</a>

2b. Random Array

Create an array in JavaScript using the pieces of your email address that you have broken up into. Following their proper assembly, add the email address to the web page using the.innerHTML attribute.

<span id="email"></span>

<script>
  var parts = ["john", "abc", "com", "&#46;", "&#64;"];
  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
  document.getElementById("email").innerHTML=email;
</script>

3. WordPress + PHP

You might also think about encoding your email address using WordPress’ built-in antispambot() function. Although they will display correctly in the browser, the function will encode the characters in your address to their equivalent HTML character entities (the letter a becomes a and the @ sign becomes @).

<?php echo antispambot("john@abc.com"); ?>

Email addresses can also be encoded in the browser. https://ctrlq.org/encode/

Last but not least, avoid including your email address on the page altogether or utilize Google’s reCAPTCHA https://www.google.com/recaptcha/mailhide/ service if you absolutely don’t want spam bots to see it. People will need to correctly answer a CAPTCHA in order to see your email address, which is hidden behind one.

Related Posts