4 consumer trends that could help web designers find new clients
June 4, 2024
6 tips for upselling and cross-selling in ecommerce
June 4, 2024We’ve all seen it. The customer wants their email address on their site. You add it, but then they have a new complaint – there’s too much spam.
While spam filters can stop them from appearing in the inbox, it’s even better to prevent the email addresses from ever getting picked up by the spam bots. We have 15 different ways you can do this, with the pros and cons of each.
No protection
The most basic bit of HTML – your email address and a mailto tag.
<p>Please email us at <a href="mailto:[email protected]"> [email protected]</a>.</p>
Pros: Everything can read it. People, browsers, screen readers, whatever.
Cons: Everything can read it. Which means it’ll be harvested within seconds.
Replacing with an image
Instead of having a text link, you can have an image with the email address in it.
<p>Please email us at <img src="emailaddress.jpg" width="150" height="20" alt="Email address"></p>
Pros: Spam bots aren’t going to pick it up as an email address. People can understand it and can type it into an email program, much like they would with a print campaign.
Cons: It’s not a link, so you can’t just click on it. Screen readers will read the alt text, but putting the email address in the alt text means that spam bots can pick it up. The image won’t scale the way text does, making it difficult to make responsive. People have to go to the effort of retyping the email address and entering it, which they not be bothered with. And now some spam bots can actually search images using OCR, and pick up the email address anyway.
Replacing with a PHP script
Rather than having an email address right there, have a link to a PHP script that then loads the mailto for the address.
On the page:
<p>Please <a href="mailhandler.php">email us</a>.</p>
In the script:
<?php
/* Mailhandler for the main email address */
header ("Location: mailto:[email protected]");
exit();
?>
Pros: Spam bots won’t see the email address. You can also have this across your site, and if you ever need to change the email address, it’s just changing one file.
Cons: You are calling a script each time someone clicks on that link. Spam bots won’t just crawl the site, but also search engines, so you might get a lot of hits on that one script.
Replacing the special characters
This is the classic way to “disguise” your email address. Rather than having the @ and the ., you just have words.
<p>Please email us at <a href="mailto:example4ATheartinternetDOTuk"> example4 AT heartinternet DOT uk</a>.</p>
Pros: You can replace any parts with anything – make it [AT], *AT*, whatever. And it’ll open up in the mail client just like it’s supposed to.
Cons: Some spam bots are able to automate the replacements, and can read an AT just as well as an @. Plus, it’s still on the user to change the email address, and they might get frustrated and not bother.
Hiding through basic HTML codes
This is another fairly easy way to “disguise” the email address. With your a list of HTML codes, you can replace the symbols with their HTML numbers.
<p>Please email us at <a href="mailto:example5@heartinternet.uk"> example5@heartinternet.uk</a></p>
Pros: Displays perfectly in the browser and loads up correct in the mail program.
Cons: Spam bots have already seen through this trick and can automate the replacements, unfortunately.
Fully hiding through HTML codes
Rather than just replacing the @ with an HTML code, you can replace everything with HTML codes and URL codes, producing a giant chunk of numbers and characters. Use the list of HTML codes from above or grab Web Bay Web’s Email Encoder to see it work.
<p>Please email us at <a href="mailto:exa mple7@heart internet.uk"> example7@he artinternet .uk</a>.</p>
Pros: Even the mailto is converted, but it all displays correctly and loads up in the mail program.
Cons: Spam bots can still decipher these.
Adding in HTML comments
It looks right, and people can copy/paste it right, but it’s hiding a secret in the code – plenty of HTML comment tags.
<p>Please email us at example <!-- --> 8@ <!-- --> heart <!-- --> internet <!-- --> .uk <!-- --> .</p>
Pros: Displays properly in the browser, and people can copy/paste it into their email program.
Cons: If a mailto is used with it, it can be recognised as an email address. Also, it can add a lot more weight to your page.
Adding in text for the user to remove
Instead of just putting in an AT, you put in an extra bit of text. You can also style up this text with CSS to make it clear that it needs to be removed.
<p>Please email us at <a href="mailto:[email protected]">example9 <span style="color: #f00; text-decoration: line-through;">REMOVE</span> @heartinternet.uk</a>.</p>
Pros: You can turn the inaccurate email address (the example9REMOVE) into a honeypot, picking up spambots and popping them on a blocklist.
Cons: The CSS may not load correctly on some browsers. People will need to remember to remove parts of the email address in order to have the correct address.
Adding in text that doesn’t appear on the page
With CSS, you can also display:none the text, meaning that it appears in the code, but it won’t appear on the page. You can use this for single words, or fill up the email with random text.
<p>Please email us at example10 <span style="display: none;">REMOVE</span> @heartinternet.uk.</p>
Pros: Spam bots will pick up an inaccurate email address, which you can turn into a honeypot, but to the average user, everything looks normal.
Cons: Users will have to copy/paste the email address in. Some browsers might not pick up the CSS.
Building the email address in JavaScript
JavaScript lets you add together the email from all the bits and pieces, making it hidden from spam bots, but easy to click on.
<script language="JavaScript" type="text/javascript">
var part1 = "example11";
var part2 = Math.pow(2,6);
var part3 = String.fromCharCode(part2);
var part4 = "heartinternet.uk";
var part5 = part1 + String.fromCharCode(part2) + part4;
document.write("Please email us at <a href=" + "mai" + "lto" + ":"
+ part5 + ">" + part1 + part3 + part4 + "</a>.");
</script>
Pros: Completely hidden from spam bots, because they won’t trigger the click event.
Cons: If JavaScript is disabled, the entire sentence will not appear.
Use a CAPTCHA
Want to keep your email hidden from robots? Ask people if they’re robots. Google’s reCAPTCHA service is a great option, and, in fact, is often invisible to people. Sign up for it, put the details in, and you have a way to stop bots from getting your email.
<p>Please <a href="GOOGLE LINK"
onclick="window.open('GOOGLE LINK', '', 'toolbar=0, scrollbars=0,
location=0, statusbar=0, menubar=0, resizeable=0, width=500,
height=300'); return false;">email us</a>
Pros: The email address is completely hidden from spam bots, and you can redesign the CAPTCHA to match your design. Plus, reCAPTCHA provides a service for major crowdsourcing projects, such as Project Gutenberg.
Cons: Visitors might get annoyed with the CAPTCHA, and not bother. Accessibility is also not a given.
Loading part of the address via CSS
Using the ::before and ::after selectors in your CSS, as well as display: none, you can engineer an email address that looks right to users while giving spam bots the wrong address.
<style type="text/css">
p#emaildomain::after {
content: "1340heartinternet.uk";
}
span#emailname::before {
content: "example";
}
span#botblocker {
display: none;
}
</style>
<p id="emaildomain">Please email us at
<span id="emailname">
<span id="botblocker">[email protected]</span>
</span>.</p>
Remember to use 40 instead of @ so the CSS picks it up properly.
Pros: Spam bots will only read what’s in the HTML, not what’s in the CSS. Because of this, you can set up a honey trap and get bots blocked fairly quickly.
Cons: The text will be read by humans, but might have issues with some browsers. Plus, they’ll have to copy/paste the email address.
Reversing the character squence with CSS
With the unicode-bidi and direction selectors in CSS, you can actually produce an email address that looks right on the screen but is nonsensical in the code.
<p>Please email us at <span style="unicode-bidi:bidi-override; direction: rtl;"> ku.tenretnitraeh@41elpmaxe</span>.</p>
Pros: Spam bots will see the backwards-facing email address, which will naturally go nowhere.
Cons: You have to switch the email address around, and some spam bots will recognise the pattern and harvest the email address anyway.
Encrypting the email address using ROT13
Use JavaScript to build a ROT13 substitution cipher that hides the email address. Use a ROT translator your email address’s secret code.
<script language="JavaScript" type="text/JavaScript">
/* Encryption function */
function encRot13(mailString) {
var mapArray = [];
var elements = "abcdefghijklmnopqrstuvwxyz";
var outp = "";
for (i = 0; i < elements.length; i++) {
var x = elements.charAt(i);
var y = elements.charAt((i + 13) % 26);
mapArray[x] = y;
mapArray[x.toUpperCase()] = y.toUpperCase();
}
for (i = 0; i < mailString.length; i++) {
var c = mailString.charAt(i)
outp += (c >= 'A' && c <= 'z' || c >= 'a' && c <= '' ? mapArray [c] : c)
}
return outp;
}
/* Concatenating and redirection mailstring function */
function decryptMail(encString) {
var linkString = "mailto:" ;
var addressString = encRot13(encString);
linkString += addressString;
document.location.href = linkString;
}
</script>
<p>Please
<a href="JavaScript:decryptMail('[email protected]');">
email us</a>.</p>
Pros: Spam bots will see the incorrect email address first and use that. There’s also no obvious mailto: link, which means they may bypass it.
Cons: Requires JavaScript to be turned on, and ROT13 is fairly easy to decipher – it can be easily picked up by spam bots. By adding ROT5 as well, you can encrypt the numbers as well.
Using a contact form
But when it comes to the endless struggle against spam, a plain old contact form is your best bet. Along with hiding any email addresses, you can easily put in CAPTCHAs to stop spam bots from exploiting the form.
There are a wide range of contact form scripts available online, as well as plug-ins for content management systems such as WordPress.
With a contact form, it also helps to add in <label> tags – this makes it easier for text-to-speech browsers and other systems to easily identify which field goes with which <input> tag.
