Protecting forms with negative-Capchas

 

Problem

Every form is a target of Spam-Bots. But how to protect your web from those evil bastards?
Captcha is the most common method preventing those machines from using your forms. An image with a number or a word is created that is readable for humans but not for the automated systems. Only if you type the word correctly in a text field, the form is sent.

Efficient. But quite uncomfortable for the user. There is an easier way. But first... let's have a look, how a spam-bot works.


A bot identifys a form and fills out every input-field, selects an option of every dropdown, checks every checkbox possible. If a field has the name "email" or is defined as type="email" it simply generates a fictional but valid e-mail address. They a programmed efficient. Just filling every input and try sending it. Some of them can even identify fields that required numbers like zip-codes.

Solution

So we can use this method against it. Just create a text-field that needs to be left blank. Then you can create a container around it, that hides it when you use a common browser. All you have to do now is check the field on server-side if it is left blank.

Requirements

A way to validate the inputs on the server side.

Example

 ...
<style type="text/css">
    .forthebot
    {
        display: none;
    }
</style>
...
<form action="" method="post" name="form1">
    <div>
        <label for="email">Enter your e-mail</label>
        <input type="email" id="email" name="email" placeholder="E-Mail" />
    </div>
    <!-- Here comes the Spam-bot trap -->
    <div class="forthebot">
        <label for="bot">Please leave this field blank</label>
        <input type="email" id="bot" name="bot" placeholder="Leave blank" />
    </div>
    <input type="submit" value="Send" />
</form>