Invisible captcha to prevent form spam
Posted by: Fred Boyle on Friday March 27, 2009
Most websites have a form or two on them. These forms attract spammers and suddenly you have forms creating or sending spam. Avoiding this has traditionally been solved with captchas – those lovely garbled images of text you must decode to submit the form.
Do captchas work? Yes, they do prevent spam, however they’re not easy to use. Frequently difficult for visitors to decipher correctly, captchas add another barrier to usability.
So how do we avoid this additional barrier and prevent spam at the same time?
The solution we use is the honeypot technique, also known as the invisible captcha. It’s not a new idea, but a useful one that has fallen out of favor over time and is often overlooked. This entails adding a confirmation field for something like the e-mail field, then using the power of CSS to hide it from view. With this field hidden, a human should never see it and it should remain empty. A spamming robot will, however, see this hidden field since they bypass the CSS and feel the need to fill it. A little bit of honey to attract the baddies. This means that when your code processes your form you can simply avoid doing anything if this hidden confirmation field isn’t empty. Voila, spam avoided!
Example:
<label for="email">Email:</label><input type="text" name="email" value="" />
<span class="confirmation-field"><label for="email-confirmation">Email confirmation:</label><input type="text" name="email-confirmation" value="" /></span>
CSS:
.confirmation-field { display: none; }
Comment RSS Filed under: Code, Interweb
Dennis Eusebio
03.27.09 at 3:25pm
Man, I frickin love it. What a cool idea.
Nick Whitmoyer
03.28.09 at 2:52pm
I’m a fan of this technique and have been using it for client projects as well. You’re exactly right about captchas being difficult to use and when conversion rates are a factor, a solution like this will help maintain conversion rates vs hurting them.
It’s also really important to add instructions for users that don’t have CSS enabled (e.g. mobile devices or screen readers) that they should not fill out that particular field. Doing so will keep accessibility folks happy :o)
Fred Boyle
04.06.09 at 11:16am
Dennis, glad you like it.
Nick, good point on the usability and making sure it is setup for folks that don’t have CSS.
Thanks for the comments!
Scott
04.20.09 at 4:16am
Hi
This is a wonderful opinion. The things mentioned are unanimous and needs to be appreciated by everyone
scott
<a href=http://www.jobjobssearch.com>Job Search Advice</a>
Phil
04.21.09 at 11:14am
A couple of gotchas here:
Firstly, make sure that you don’t give the hidden field a name like ‘email’ or ‘name’, otherwise you’ll run into problems with some users who have autocompletion enabled for these fields in their browser.
Secondly, beware that this isn’t that robust – it’ll obviously offer no protection against targeted attacks, and you may find that some bots will try leaving a subset of the fields blank at random. This will definitely become the case if this technique becomes widespread.
Graham Sibley
04.25.09 at 12:30pm
Brilliant! This is, by far, a more usable option.
Jasper
04.28.09 at 10:41am
I’ve been using this for quite a while now. Normally in the label tag, I put something like “please leave blank” so that people without CSS know not to fill it in. I haven’t had any complaints so far…
Pranny
05.08.09 at 1:46pm
This is something really great and amazing !!