Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Documentation: Hide an e-mail address from a spam bot

#2430
Avatar photo[anonymous]
[anonymous] wrote:

Ah okay, thanks, I understand now. That’s why Contact Forms were invented I guess. A well-made form does not display the receiving email address. That way, it not only protects against the spam bots, but even a human cannot read the address. This human could be head of an army of a thousand spam bots…

You’re right ! Contact forms are pretty useful if you want to avoid bots collecting email adresses. But they are known to be exploited by bots too and they could be very annoying. You can use other protections (captchas, honeypots …) to avoid this. But it’s an other topic ^^

Therefore Verhoeckx your idea is really nice 🙂 But you could do something even more tricky for bots. Here, if your bot can render js, it can collect the mail address. Here is another version a little bit easier to read and without any way to bots to get your address (in my example the address is foo@bar.com) :

First the HTML part :

<span class="mail_link" data-user="foo" data-server="bar" data-extension="com">Send me an email</span>

As you can see it’s not even a link. No spambot will follow something that doesn’t look like a link isn’t it ? Just some attributes and a class to detect your pseudo link 🙂

Then for the js, I’m not really good for vanilla so I’ll give you jQuery :

$("span.mail_link").click(function () {
    var email=$(this).data("user")+"@"+$(this).data("server")+"."+$(this).data("extension");
    location.href="mailto:"+email;
});

When you click on your pseudo link, you recreate the email address from the data attributes and then you just ask for your browser to open your mailto link 😉 Once again, my vanilla js is a bit rusty but it can be very simply converted into vanilla js code.

And to get a nice UX touch, a bit of css :

span.mail_link {
  cursor: pointer;
}

Just to have the little hand cursor when your mouse comes over the pseudo-link.

You can even encode your fields if you’re really paranoid. But I think it would be a bit too much…