How to publish an email address on your website without getting spammed

If you’re a business, agency, contractor or community driven website, you want people to be able to contact you.

Whether that’s to foster new leads, respond to customer service enquiries or foster a relationship with your community members.

But not at the expense of being spammed.

Receiving spam emails is a nuisance and waste of time at best, and in some cases, they can contain malicious content, such as phishing scams or malware.

Spam emails clog up your inbox, making it more difficult to find important messages, and can even negatively impact your email deliverability, causing legitimate messages to be filtered into the spam folder.

In this article, we’ll look at methods you can use to share your email address on your website, in a safe and secure way.

How is my email address discovered by bots?

Automated programs, known as email scrapers, search the web for email addresses to add to their lists of addresses to target with spam messages.

Here’s a deeper look into how this happens:

Plain Text Email Addresses

When an email address is published on a website in plain text, it is extremely easy for email scraping bots to discover and collect it. These bots are programmed to look for strings of text that match the common format of an email address (e.g., example@example.com).

HTML Source Code

Even if an email address is obfuscated on the visible page, if it is present in the HTML source code in a recognizable format, bots can still find it by scanning the code.

Linked “mailto” Hyperlinks

Some websites use “mailto” hyperlinks to allow visitors to click on an email address and have their email client open to send a message. Bots can easily follow these links and scrape the email addresses they point to.

Form Data

If a website has a contact form that sends data to an email address, bots might be able to discover the email address by analyzing the form’s code, or by intercepting form submissions if the website isn’t secured properly.

Hidden Text or CSS Tricks

Some webmasters use CSS tricks to hide email addresses from view or disguise them within the page. However, more sophisticated bots can analyze the page’s styling and scripting to discover hidden or disguised email addresses.

Metadata and Headers

Email addresses can sometimes be found in a website’s metadata or HTTP headers, which can be examined by bots.

Third-Party Tools and Plugins

Some third-party tools or plugins used on websites might expose email addresses to bots, either through poor design or malicious intent.

By keeping your email address hidden or encrypted, you can reduce the risk of it being found by email scrapers and added to their lists.

What can I do to prevent email spam?

Use a contact form

A contact form is a web-based form that visitors can fill out to send you a message.

The form will typically include fields for the visitor’s name, email address, and message, and will use PHP or another scripting language to send the message to your email address.

By using a contact form, you can avoid displaying your email address directly on your website and reduce the risk of receiving spam messages.

You can make the form even more secure by adding a Captcha.

A CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a security feature that is designed to distinguish human users from automated scripts or bots.

It works by presenting a challenge to the user that is easy for a human to solve but difficult for a computer.

For example, a CAPTCHA might present a distorted image of letters and numbers and ask the user to enter the characters they see.

The characters in the image are selected and distorted in a way that makes it difficult for automated programs to recognize them, but easy for a human to read.

Once the user inputs the correct solution to the CAPTCHA challenge, the website can be confident that the request is coming from a human and not an automated script.

This helps prevent spam, fraudulent activity, and other malicious behaviour that could be carried out by automated programs.

Use a mailto link with encryption

A mailto link is a hyperlink that opens the visitor’s email client and automatically populates the “To” field with your email address.

To protect your email address from being harvested by email scrapers, you can encrypt the link using JavaScript or another method.

This makes it more difficult for automated programs to scrape your email address from your website.

You can create an image of your email address and display it on your website instead of displaying text.

Visitors will have to manually type the email address into their email client, which makes it more difficult for automated programs to scrape it.

However, this method is less user-friendly for visitors, as they must transcribe the email address, and can result in typos and errors. It’s also a poor practice in terms of accessibility.

The HTML obfuscation approach to protecting your email address

Hiding an email address in HTML is a common approach used to protect email addresses from bots.

The basic idea is to encode the email address in HTML so that it appears as plain text to humans but not to bots that scan the HTML source code.

CSS Approach

We can utilize the styling capabilities of CSS to conceal certain content that’s only meant to trick spam bots. Consider this scenario, where we have similar content as before, but now enclosed in a span element:

<p>For contact, kindly send an email to example@domain.com. <span class="block-bots" aria-hidden="true">GO AWAY SPAM BOTS!</span></p>

We then apply the following CSS rule:

span.block-bots 
{ 
display: none; 
}

Thus, the end-user will see:

—

For contact, kindly send an email to email@address.com.

—

Encoding with entities

HTML entities are special characters used to represent characters that cannot be easily entered with a keyboard, such as the @ symbol.

To obfuscate an email address, you can encode the characters of the email address as entities.

For example, the ‘@’ symbol can be represented as ‘@’ and the ‘.’ symbol can be represented as ‘.’.

Hiding the email address in HTML comments

Another way to obfuscate an email address is to hide it within HTML comments. HTML comments are ignored by browsers when rendering a web page, but bots that scrape websites for email addresses will still try to extract the content of the comments.

To obfuscate an email address, you can add the email address within an HTML comment, making it difficult for bots to extract it. For example:

example <-- HTML comment --> @ <-- HTML comment --> domain.com

Bots/scrapers will usually scrape the HTML and include the comments as part of the email address so effectively try to email “example<– HTML comment –>@ <–HTML comment–>domain.com” instead of just ”example@domain.com” which will of course fail to reach your mailbox.

However, as HTML comments are not shown in the browser output, the email address would appear to genuine visitors as example@domain.com

JavaScript encoding

You can also encode the email address using JavaScript and display it on the web page using JavaScript code.

This makes it difficult for bots to extract the email address, as the email address is stored in the JavaScript code and not in the HTML source code.

First, create an HTML link element with the email address as the value of the href attribute. For example:

<a href="mailto:example@example.com">Contact us</a>

Next, add an ID to the link element so that we can target it using JavaScript. For example:

<a href="mailto:example@example.com" id="contact-link">Contact us</a>

In JavaScript, we can create a function that replaces the email address with an obfuscated version of it. This function can be triggered when the link is clicked. Here’s an example:

function obfuscateEmail() {
  var link = document.getElementById("contact-link");
  var email = link.href.replace("mailto:", "");
  var obfuscated = "";

  for (var i = 0; i < email.length; i++) {
    obfuscated += "&#" + email.charCodeAt(i) + ";";
  }

  link.href = "mailto:" + obfuscated;
}

This function retrieves the email address from the href attribute of the link, removes the “mailto:” prefix, and then obfuscates each character of the email address using HTML entities.

The obfuscated email address is then set as the value of the href attribute.

Finally, we need to add an event listener to the link element that triggers the obfuscateEmail() function when the link is clicked. Here’s an example:

var link = document.getElementById("contact-link");
link.addEventListener("click", obfuscateEmail);

With this code in place, the email address on the contact page will be obfuscated when the link is clicked, making it more difficult for bots to scrape the address and send spam emails.

Combining multiple techniques

For even more protection, you can combine multiple obfuscation techniques, such as encoding the email address with entities and hiding it within HTML comments, or encoding it with JavaScript and also encoding the characters as entities.

It’s important to note that while these methods can make it more difficult for bots to scrape your email address, they are not fool proof.

Advanced bots may be able to bypass these methods, so it’s always best to use multiple methods of protection and regularly review your inbox for unwanted messages.