How can I obscure email addresses on websites to prevent spam?

Question

I know this is a bit broad, but the questions is how can I obscure my email from spam bots?

What are the pros and cons of each method?

Answer 1

Obscure JavaScript

Method

I see this one a lot.

My email is <strong id="secret1"></strong>

var parts = ["secret", "my", 64, "il.com", "gma"];
document.getElementById("secret1").textContent = parts[1] + parts[0] + String.fromCharCode(parts[2]) + parts[4] + parts[3];

fiddle

Pros

It's better than plain text, and the @ character doesn't appear anywhere on your page.

Cons

There are now headless browsers that will run JavaScript and look at the dynamic page, instead of the html source.

---

::before and ::after

Method

Using pseudo selectors in CSS, we can have content appear after an element. It's never added to the DOM, so it's purely visual.

My email is <strong id="secret2">mysecret</strong>

#secret2::after {
    content: '@gmail.com';
}

fiddle

Pros

If you remember to use ::after instead of :after, you can prevent IE<9 users from emailing you.

Cons

The user can't select the pseudo element's content. In the above example, they will have to type "@gmail.com" when emailing you.

---

Contact Form

Method

Provide a contact form, and use a server side script to send the email to you.

<h1>Contact Us</h1>

<form action="contact.php" method="POST">
    <label for="subject">Subject</label>
    <input type="text" name="subject">
    <label for="email">Email</label>
    <input type="email" name="email">
    <label for="body">Message</label>
    <textarea name="body" cols="30" rows="10"></textarea>
    <input type="submit">
</form>

fiddle

Pros

• you never show your email address, unless you decide to respond
• you can rate limit the form, and provide a captcha
• you can log IP addresses, and block any that send you spam
• you can provide useful options to the user (like multiple choice "what is this about")
• captchas can be used
• you can tie messages to user accounts, and provide updates on the site, along with an archive of previous conversations
• can log browser information (e.g. user-agent) for quicker technical support

Cons

• it feels impersonal
• requires a server side language
• takes more time to implement