Quality Criterias      Speed of Web      Contact Us      
5 Ways to Create There are numerous ways to stop automatic spam robots from sending unwanted messages through web contact forms. The most user-friendly solution is to catch all these nasty spam insects in the Honeypot.      5 Ways to Create Honeypots for Reducing Contact Form Spam Prevent spam messages with Honeypot technique. Honeypot CSS tricks for hiding contact form field. Additionally there are ways to use jQuery as well as plain Javascript to create Honeypot fields.
fastest

websites

in Birmingham

How to Catch Spam Robots with Honeypot Traps

There are numerous ways to stop automatic spam robots from sending unwanted messages through web contact forms. The most user-friendly solution is to catch all these nasty spam insects in the Honeypot.

5 Ways to Create Honeypots for Reducing Contact Form Spam

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.

 

Updated - we also added the sixth CSS property and example how to hide form a field with Javascript as well as with jQuery.

  

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.

 

Conclusion - Be Creative!

Finally, these are just some basic tips and tricks for creating honeypot type spam robot traps for your contact forms. Robots are getting better and better, especially in reading plain CSS properties. However, just by adding a few lines of Javascript or jQuery scripting, you can make discovering these traps much harder. Best solutions are always those which are not very widely used. It means that you need to be creative and combine those basic examples in a way that nobody hasn't before.    

How fast is your site? Check here.
Ask a Quote for website design.

Fast Websites
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.

Web Hosting
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.

Disclosure
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.

Web Solutions araweb.co.uk

5 Ways to Create

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 There are numerous ways to stop automatic spam robots from sending unwanted messages through web contact forms. The most user-friendly solution is to catch all these nasty spam insects in the Honeypot.

5 Ways to Create Honeypots for Reducing Contact Form Spam

Prevent spam messages with Honeypot technique. Honeypot CSS tricks for hiding contact form field. Additionally there are ways to use jQuery as well as plain Javascript to create Honeypot fields.
www.araweb.co.uk © 2017 Ara Website Design Ltd. » Maker of Fast Websites