The main purpose of adding honeypots to the form is to detect robots that are programmed to fill out forms automatically and post all sort of spam. Naturally, these robots see contact forms quite differently from real human readers.
The main difference is that spam robots don't parse page html and CSS (Cascading Style Sheets) in same way modern browsers display pages to human readers. "Honeypots" are used in same way as a sticky paper to catch flies. Robots are programmed to fill out form fields and, because they don't often see the difference between visible and hidden fields, they fill out the input fields that humans, naturally, leave empty. If any of such fields include content, it's safe to conclude that you've just caught a robot in action.
Early versions of spam robots didn't parse any CSS styling, but as time goes by, spammers have
developed basic abilities to detect and avoid some hidden fields. That's why we suggest using so many various ways to combine html, CSS and any other means. We describe 5 different methods here, how to hide form fields with html and CSS.
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.
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.
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.
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".
What is fun about this property is that less known value "collapse" works on non-table elements the same way as "hidden".
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
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
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.
This way input surrounding div will move input field outside of visible area and hide overflown content at the same time.
And here is an equivalent of the same dynamic style manipulation with jQuery
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
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
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
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.
Conclusion - Be Creative!
Nobody likes slow website. For building fast web, you need solid and reliable website platform. Important is to host site to fast UK Web hosting server.
We tested many UK Web Hosts and measured error rate and speed of web hosting servers. For reliable results, see UK web hosting firms we suggest.
All UK Web Hosting companies are independent firms, with own terms and conditions as well as privacy policies. Some UK Web Hosts stipend us.
Ask a Quote
Ara Website Design Ltd., 11477099,
Fastest Websites in Birmingham
For Website Design, Ask a Quote or
send us e-mail.