How to Catch Spam Robots with Honeypot Traps

Input type hidden

It may seem trivial, but some spam robots still fail to leave it empty! For starters, this is definitely the easiest to implement, since hidden type input fields will be hidden anyway and this doesn't need any related CSS.

HTML
<input name="f_name" type="hidden" value="">

Nowadays, not all robots are filling all fields blindly any more, but some still do. You may use it just for warming up. Let's move on to real CSS examples now.

1. CSS absolute position

Next, we use CSS positioning for defining absolute position and moving input field out of visible screen by a few hundred pixels.

CSS
.abspos{position: absolute; top: 3px; left: -680px;}

HTML
<input class="abspos" name="phone_field" type="text">

This way browsers don't display particular input field, because it is with absolute position moved left from original position and humans don't see it.

2. Display none

CSS has property "display", which may have various values like "inline", "block", "table", "inherit" or "none". The last one hides a particular element.

CSS
.dispnon{display: none}

HTML
<input class="dispnon" name="field_name" type="text">

Humans don't see this form field, but robots may easily fall into the trap.

3. Visibility hidden

Similarly to the previous one, "visibility" offers an easy way to hide an element. Possible values for this property may be "visible", "inherit", "collapse" or "hidden".

CSS
.vishid{visibility: hidden}

HTML
<input class="vishid" name="phone_line" type="text">

What is fun about this property is that less known value "collapse" works on non-table elements the same way as "hidden".

CSS
.vishid{visibility: collapse}

To make form rendering tougher for robots, you may use the latter one.

4. CSS Opacity

Opacity is a great property to use for hiding form elements, too. Basic syntax

CSS
.transp{opacity: 0;}

works well on all modern browsers. However, you may need to check on this CSS property more specific values for older browsers like Internet Explorer 8, 7, and 6 versions (i.e. IE8, IE7 and IE6 browsers).

5. Layers z-index

Last but not least, using layers to stack form field behind visible content is truly a handy solution. Define positive layer with z-index for the main content and then

CSS
.zbehind{position: relative; z-index: -1}

move input field behind foreground. Just make sure that you also use property "position" as well as some background for the main layer.

New! Indenting text 100%

One of the latest and very effective tricks is to use property "text-indent" with value "100%" to move visible content behind the right side of the visible layer. At the same time, you need to define "white-space" and "overflow" properties.

CSS
.indetext{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

HTML
<div class="indetext"><input name="z_zip" type="text"></div>

This way input surrounding div will move input field outside of visible area and hide overflown content at the same time.

Other solutions Javascript and jQuery

As time goes by, spam robots have become better in rendering and discovering hidden CSS honeypots. Fortunately, most of them are not able to read javascript and you may very effectively use it for hiding form input elements.

HTML
<input name="z_state" type="text" id="honeyid></div>

Javascript
document.getElementById('honeyid').style.display = "none";

And here is an equivalent of the same dynamic style manipulation with jQuery

jQuery
$("#honeyid").css("display", "none");

in case you already have jQuery included to page, the latter is certainly shorter.

Input Field Names

Some robots are programmed to avoid input fields that have names like "honeypot", "honey", "trap", "spamtrap", "norobot", "leaveempty" and other similar input names, which may indicate that they are honeypot trap fields. The same applies to input id's and style classes, if names include "hidden", "nohuman", "robots", "empty", they may be detected by some advanced spam robots.

Examples of Semantic Traps

On the other hand, robots just love field names like "url", "e-mail" and "name" - they are more than happy to stick their addresses to them. Having too obvious input name fields makes discovering form input structure too easy and helps getting through automatic syntax check systems. However, switching "phone" and "name" fields in form names enables, for example, filter the postings which have numbers in name field. Another way to confuse is to use "e-mail" on some field name, like "zip" or "street address" to catch those who post "@-signs" or domains there. 

Caution! Browser Autocomplete

While using hidden fields for detecting robots, it is important to be aware that some browsers may have autocomplete feature on typical input fields like "name", "e-mail", "phone" and "zip code". If hidden fields with those names are completed automatically, human users don't see them and it may cause false flag in posting otherwise reasonable queries by real humans. You may use it

HTML
<input type="text" autocomplete="off">

but it is reported not to work on some browsers. One of the solutions is to use completely non-semantic input field names like "field1", "field2" and "field3". In this case, you use just mapping in server-side script, avoid autocomplete errors as well as make guessing the true nature of each field much harder.

Labels and Text around Input Fields

Some robots are already able to pretty well read text around input fields. Some sources still suggest to use labels for each input field, like

HTML
<label for="zip">First Name:</label>
<input type="text" name="field1" id="zip">

in this case using obfuscated input fields becomes useless - robots are pretty good in reading input labels nowadays.

A truly effective way: you may try to make picture of some label and name it in an absolutely confusing way

HTML
<img src="image/email.gif" alt="please fill the field" id="email">
<input type="text" name="field1" id="email">

and having a visible text of "Your name" on this .gif image avoids browsers autocompleting field and enables you to check result against not having any "@-signs" or other e-mail related syntaxes there. Using pictures is one of the most effective ways to obfuscate labels around input field. The downside is that those 0.5% of human visitors, who use screen reader software are not able to get true information about input field labels either.