How to Obfuscate an Anti-Spam Email in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to display an email address on your Webflow site without making it readable by spam bots.

Example

Understanding the problem

Spam bots crawl the web looking for email addresses in the HTML source code. A mailto: link or a plain-text email in your HTML will get collected within hours and added to spam lists. Obfuscation means hiding the email in the HTML so humans can see it, but bots can't.

1. Encode your email in Base64

In your browser console (F12), type:

btoa('hello@gemeos.wf') // Returns: 'aGVsbG9AZ2VtZW9zLndm'

Copy the result. That's your encoded email.

2. Add the element in a Webflow Embed

In an Embed, paste this HTML and replace the value of data-email with your encoded email:

Loading...

3. Add the script in Footer code

The script decodes the email when the page loads and makes it clickable.

(function() {
  document.querySelectorAll('[data-email]').forEach(function(el) {
    var encoded = el.dataset.email;
    var email = atob(encoded);
    el.textContent = email;
    el.addEventListener('click', function() {
      window.location.href = 'mailto:' + email;
    });
    el.style.cursor = 'pointer';
  });
})();

Conclusion

Base64 obfuscation is the simplest and most effective way to protect an email on a Webflow site. Use cases:

• Contact pages with a displayed email
• Footers with company contact details
• Team pages with employee emails

Click the email to open your mail client

Contact

Loading...