Honeypot Implementation

Question

Trying to filter spam from an online form. I have a hidden div with input. The idea is that if something goes into the field, the form will identify the user as a bot and reject the view. After trying to implement this method, the bots still pass. I'm not very familiar with javascript (or spam filtering, for that matter) - this is what I work with:

html (within the form):

<form action="#" method='post' id='vsurvey' name='defer'> <div id="hp-div"> If you see this, leave this form field blank and invest in CSS support. <input type="text" name="question_20579" value="" /> </div> <input type="submit" value="Submit Request" /> </form> 

CSS

 #hp-div { display: none } 

JS:

 <script type="text/javascript" charset="ISO-8859-1" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" charset="ISO-8859-1" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <script type="text/javascript"> if(!String.IsNullOrEmpty(Request.Form["question_20579"])) IgnoreComment(); </script> <![if !IE]> <script type="text/javascript"> $(document).ready(function(){ $("#vsurvey").validate({ invalidHandler: function(form, validator) { var errors = validator.numberOfInvalids(); if (errors) { var message = errors == 1 ? 'Oops! You missed 1 field. It has been highlighted' : 'Oops! You missed ' + errors + ' fields. They have been highlighted below'; $("div.alert span").html(message); $("div.alert").show(); } else { $("div.alert").hide(); } }, errorPlacement: function(error, element) { return true; } }) }); </script> <![endif]> 

Answer 1

In my opinion, a honeypot should consist of ALL of the following:

• CSS hidden field
• A field hidden by JavaScript.
• Field requiring blank input
• Field requiring a specific input

For instance:

 <div class="input-field"> Please leave this blank <input type="text" name="contact" value="" /> </div> <div class="text-field"> Please do not change this field <input type="text" name="email" value=" [e-mail] " /> </div> 

Use CSS to hide the first field:

 .input-field { display: none; } 

Using jQuery, hide the second field:

 $('.text-field').hide(); // or $('.text-field').addClass('hide'); 

Then a couple of very simple checks in PHP:

 if($_POST['contact'] == '' && $_POST['email'] == ' [e-mail] ') { // Not a bot }