Spambot-Resistant Email Link

Topics covered in this HTML & CSS tutorial:

The mailto protocol for email links, Why you should avoid mailto, Using JavaScript to obfuscate an email link

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to create an email link so visitors can contact you. You’ll also learn a best practice for hiding your email address from spammers.

Creating an Email Link Using the Mailto Protocol

1. We’ll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion.
2. For this exercise we’ll be working with the Revolution Travel Contact folder located in Desktop > Class Files > Web Dev Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open contact.html from the Revolution Travel Contact folder.
4. Preview contact.html in a browser to see what we have so far. Let’s add the email address toward the bottom of the page.

5. Towards the bottom, add the email for our visitors to see:

   <p>
      <strong>Email:</strong><br>
      hello@revolutiontravel.com
   </p>
   

   While this will display the email address for people to see, we want to make this into a link people can click that will open an email pre-addressed to this email.

6. There is a mailto protocol for launching an email application from a link. Add the following code to make the text a functional email link:

   <p>
      <strong>Email:</strong><br>
      <a href="mailto:hello@revolutiontravel.com"> hello@revolutiontravel.com</a>
   </p>
   

7. Save the file and preview contact.html in a browser.

8. Click on the email link. If the computer is set up properly, it should launch an email program. If people visiting the website don’t have an email program set up, or if they use web-based email like Gmail, they’ll still know the address by looking at the webpage.

Creating a Spambot-Resistant Email Link

There’s a catch to using the mailto protocol. Spammers have email harvesters that scan websites and find these addresses. Luckily we can use JavaScript (a scripting language used for interactive content on websites) to obfuscate the email link so spammers can’t read it.

We can write a script that essentially breaks the mailto into pieces in the code and assigns nonsense variables to each piece. Email harvesters are rarely smart enough to understand the script and piece it back together, effectively hiding the address from spammers. If you were to Google spambot-resistant email link, you’ll see that there are a ton of resources for you about writing your own script. There are even stock scripts you can edit and use, as well as online tools for generating a script.

1. We have provided some JavaScript code that you can easily edit and use in any project. Return to your code editor and open spam-proof-email.html from the snippets folder (in the Revolution Travel Contact folder).
2. Select all the code (Cmd–A (Mac) or Ctrl–A (Windows)).
3. Copy it (Cmd–C (Mac) or Ctrl–C (Windows)).
4. Close the file.
5. You should be back in contact.html.
6. Select the email link you just wrote and paste the JavaScript over it.

7. Edit the script by changing your-name to hello and your-domain to revolutiontravel as shown below in bold:

   <p>
      <strong>Email:</strong><br>
      <script>
         var eDone = 'hello'+'@'+'revolutiontravel'+'.'+'com';
         var eSubject = '';  // optional
   
         document.write('<a '+'hre'+'f="mai'+'lto:'+eDone+'?sub'+'ject='+eSubject+'">'+eDone+'</'+'a>');
      </script>
   </p>
   

8. The email’s subject line can be prefilled by adding ?subject=Some Text Here after the email address in a mailto: link. This is an option in our supplied JavaScript, so let’s see how it works. Inside the single quotes, type Travel Inquiry as shown below in bold:

   var eSubject = 'Travel Inquiry';  // optional
   

9. Save the file and preview contact.html in a browser.

10. Click the email link. It should work just like the mailto, but now it will be more difficult for spambots to harvest the email address. Notice it even has the custom subject line: Travel Inquiry!