In an earlier post I discussed the mystery of forms. Preventing spam on your blog or website can be difficult, because bots and spammers are relentless. However, with the right anti-spam techniques the battle can be won!
Notice how I said the “right anti-spam techniques.” There are effective honeypot spam prevention measures that totally alienate the user. One example of that is a CAPTCHA field. While they’ve gained popularity in recent years, anti-spam techniques can interfere with users filling out forms, because they cause friction and ultimately decrease conversion.
That’s why one of my favorite methods to use against spam bots is the honeypot technique, which is virtually undetectable by the user.
How the Honeypot Technique Works
Here’s how the honeypot technique works to prevent spam. It’s a bit technical, but we’ll try to break it down for you as simply as possible.
When a spam bot comes to a form, it fills out EVERY input field, but it ignores the CSS code. This is the behavior we can exploit. You would create a regular form input field with HTML (this will be the honeypot field). The spam bot will see the field, but you’ll use CSS to hide the field from users.
Then, add some Javascript code to handle the form submission. If the honeypot field is empty, the Javascript code would submit the form. On the other hand, if the anti-spam honeypot field has data, you know it could only have been filled out by a spam bot.
Easy, right? The user is none the wiser, and we prevent spam bots from submitting the form with junk data.
Now let’s dive into the actual code of the Honeypot spam prevention technique.
The CSS
I’m going to get a little technical and show two different ways of handling the CSS. The first example is with a CSS3 attribute selector. Please note that IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified, which should be standard practice. Attribute selection is not supported in IE6 or below.
input[type="text"]#website { display: none; }
The old school way of doing things, but supported by IE6.
input#website { display: none; }
Let me explain the difference. There are several types of inputs: submit, button, password, text, and so on. Now with HTML5 there are even more: tel, number, date, etc. Using input with our unique id #website allows this style to be set on ANY input type that has this id.
Adding [type="text"] limits the style to text input types that contain this unique id. It’s just a matter of personal preference which honeypot method you use and how global the style needs to be.
The JavaScript (jQuery):
<script>
$('form').submit(function(){
if ($('input#website').val().length != 0) {
return false;
}
});
</script>The HTML:
<form method="get" action="/">
<input name="firstname" type="text" value="First Name" />
<input name="lastname" type="text" value="Last Name" />
<input id="website" name="website" type="text" value="" />
<input type="submit" value="Submit" />
</form>In the example above, the website field is hidden with CSS because of id="website". A user enters first and last name and submits the form. If the website field is empty, the form will submit as expected – but if the anti-spam honeypot field has text in it, then the form will do nothing when submitted as you can see by the return false in the JavaScript function.
For the Novice: Things to Remember
Script and CSS references go in the<head>tag, HTML goes in the<body>tag. Classes can be used throughout the web page and referenced unlimited times, but id’s are unique and used only once.
Using a jQuery function requires the jQuery library reference, which can be found here. Always declare a !DOCTYPEtag if using CSS3 so less modern browsers behave properly. Remember, the web is fun. Enjoy!
If you’re worried about spam, you may be worried about your business’s online presence. Curious to learn more? Thryv helps business owners thrive.
Updated March 28, 2018: The above Honeypot technique will work on spammers that do not ignore JavaScript. However, for spammers that do ignore JavaScript, a server-side anti-spam technique would be a better solution.
Editor’s Note: This article was originally published in May 2013, but is frequently updated to reflect the best coding practices.
