The Honeypot

, , ,

We wanted to remove as many barriers as possible when using forms to collect user information.  Some of our forms featured just two fields: the clients’ name and email address, and it seemed like overkill to also ask them to fill in a captcha just so they could send us these two bits of information.  So, how do you remove the Captcha but keep the security it offers?  The Honeypot method offers a straight-forward and lightweight solution that is invisible to the user.

Basically,  the honeypot is a hidden field on a form. The user does not see the field, so they have nothing to fill out. Automated bots, however, will see the field and likely try to fill it in before submitting the form. So all we have to do is check to see if the field has been filled in. If so, we simply discard the form entry, since we know the field was not filled by a real person.

< input id="real_email" name="real_email" size="25" type="text" value="" />
< input id="invisible_email" name="email" size="25" type="text" value="" />
#invisible_email {
display: none;

To enhance this method, we’ll add another layer of authentication: An event listener added to the form checks to see if the form fields have been Clicked. Since bots traverse the form in code and fill the form by assigning values to the form fields, they don’t generate a click event. The listener is set up to fill in yet another hidden field with a specific value. When we check the field, if it contains the wrong value, we know it was filled in by a bot and not a human.

//Here's the listener
jQuery('#gform_2').find('input').click(function() {
//And the function:
function markAsHuman() {
document.getElementById("input_2_4").value = "humanbeing!";

This solution is not perfect, users with javascript turned off will not be able to send a valid form, and some bots may be smart enough to create a click event, or to leave hidden fields blank, but so far the results are excellent with zero spam submitted!


, , ,

Posted on

August 25, 2013