When we create a website, it is important to put our contact details so that we can receive correspondence from our readers or customers. The problem is that many bots or spiders (programs designed to get the text of websites automatically) often look for emails to send junk to our mailbox and sell that email to more dubious companies with large lists to send spam to our box.

So how can we hide email from these bots?

The way to put an email on a webpage so that when clicked it opens the default program to send the email is:

<a href="mailto:[email protected]">Send email</a>

The problem here is that the programs look for this and keep all the text they have after the "mailto:" part until closing the quotes.

How can I fix this and obfuscate the email?

To solve this we can create a button that with javascript code behind it makes the mailto: link only appear after we click on the button.

To solve this we can create a button that with javascript code behind it makes the mailto: link only appear after we click on the button.

  <input id="bt_email" type="button" value="Mostrar email" onclick="mostraEmail();"/>
    <div id="mto" >Aqui irá aparecer o email depois de clicar no botão!</div>
    <script>
      function mostraEmail(){
        var m = "example.com"; m = ("user" + "@" + m)
        document.getElementById("mto").innerHTML= ("<a href='mailto:" + m + "'>" + m + "</a>");
      }
    </script>

Conlusion:

The moral of the story here is that bots when they get the text of the page instead of having a string in the email format will not find it, although it is possible that they will still get the email if they are prepared for it but the truth is, the probability will be much lower. However, it can also be more creative in concatenating the String and obfuscate the email even further.