Honeypot implementation

Question

Trying to filter out spam from an online form. I have a hidden div with an input. The idea is that if something goes into the field, the form will ID the user as a bot and reject the submission. After trying to implement this method, the bots are still getting through. I'm not very familiar with javascript (or spam-filtration, for that matter) - here's what I'm working 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 below:

• A field hidden by CSS
• A field hidden by JavaScript
• A field requiring a blank input
• A 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="your@email.com" />
</div>

Using CSS, 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'] == 'your@email.com') {
  // Not a bot
}