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/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" charset="ISO-8859-1" src=".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]>

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]>

• javascript
• spam-prevention
• honeypot

• Some spam bots can detect that the field is hidden and not fill it in. – Sean Powell Commented May 31, 2013 at 16:22
• 1 Rather than making it display: none; position it where it would otherwise be invisible - out the side of the screen, underneath another Node, etc. You will need to consider that some users use Tab to navigate controls, though. Maybe also consider capturing keydown or keyup and marking a different hidden field as "user typed" – Paul S. Commented May 31, 2013 at 16:38
• 1 fiddle to explain what I meant in last comment. – Paul S. Commented May 31, 2013 at 16:55
• @uncollected - yes, this is true. However, in my example their getting through even if they fill it out. I'd like to figure out why that is, in regards to my specific code. – blackessej Commented May 31, 2013 at 17:49
• @blackessej Can you show the a bit more code - the complete form and the code which posts the inputs? Spambots might have JavaScript disabled, so if your form can post without JS then the comments will still go through. – Sean Powell Commented Jun 3, 2013 at 0:33

1 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="[email protected]" />
</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'] == '[email protected]') {
  // Not a bot
}