Preventing forms from bots – the blank method

One of the challenges web designers and developers face is preventing forms from automated programs that disguise as humans and fill forms (call them bots). And needless to say, this bots can really be a nuisance – posting bad content, stealing data and doing all kind of weird stuffs. And so there was Captcha – a test to verify human response and prevent such bots.

But then, personally I don’t like Captchas. Ok, I love reCaptcha, but just as an idea for digitalizing books; nothing more. Since I’m not a big fan then, I figured someone somewhere may as well not be, so I decide to go the way of a different technique for validating my forms. I call it the blank method. (No, that’s not an ‘official’ name :P)

To start with, the technique is not my idea. Actually, an attribution to the owner should come somewhere here but I just can’t remember where I came across it as its really been long. That said, also note that the technique is not 100% fool proof. While it may save your form from bots, it won’t save you from real human spammers that are around to purposely junk up your site and be a nuisance.

So what is it all about? The technique is based on the fact that bots can’t see. A text input field is created somewhere in the form and labelled “Don’t fill” or “Leave Blank” or anything to tell the user to leave the input box empty. The human user filling the form will do just this  i.e.  ignore the field but a bot will fill in something there. During validation, the field can then be checked for content. If there exist a content for it, it sure is a bot (or probably a stubborn human).

Here is an overview of what it looks like:

[The html code]

<form method="post" action="submitpage.php">
    <label>Name</label> <input type="text" name="name" />    
    <label>Email</label> <input type="text" name="email" />
    <label>Leave Blank</label> <input type="text" name="foo" />
    <input type="submit" name="submit" value="Submit" />
</form>

[The server-side validation (I use PHP)]

<?php
$foo = trim($_POST['foo']);
if(empty($foo))
{
  //ok, didnt fill anything in the field
  //most def a human
}
else
{
  //filled in something
  //bot! Kick out!
}
?>

And that’s all.

Let’s tweak things a little bit to make the form more beautiful. But not just only beautiful. What about we hide the ‘Leave Blank’ field with CSS so that normally users wont even see or notice it (and consequently won’t fill it)? Bots on the other hand will still ‘see’ it and fill it.

[The CSS]

/*resets*/
.nodisplay {
    display:none
} 

/*form*/
form label {
    float:left;
    text-align:right;
    padding-right:10px;
    width:100px
}

form input.txt {
    width:150px;
    padding:3px;
    border:1px solid #ACA899
}

form input.txt:hover, form input.txt:focus {
    border:1px solid #102336;
}

[The new html]

<form method="post" action="submitpage.php">
    <p><label>Name</label> <input type="text" name="name" class="txt" /></p>
    <p><label>Email</label> <input type="text" name="email" class="txt" /></p>
    <p class="nodisplay"><label>Leave Blank</label> <input type="text" name="foo" /></p>
    <p><label>&nbsp;</label><input type="submit" name="submit" value="Submit" /></p>
</form>