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 techniques the battle can be won!
Notice how I said the “right 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 techniques to use against spam bots is the honeypot technique, which is virtually undetectable by the user.
The Guide to Winning More Business Online
Save NowHow the Honeypot Technique Works
Here’s how the honeypot technique works. 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.
Modern Small
Business Playbook
Modernize your business, get paid faster and win more customers.
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.
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 has text in it, then the form will do nothing when submitted as you can see by the return false in the JavaScript function. If the field is empty, the form will submit as expected.
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 technique will work on spammers that do not ignore JavaScript. However, for spammers that do ignore JavaScript, a server side 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.
