Select an Account to Sign In


Text & Email, Appointment Scheduling, Customer Database

MyDex Account

Pay Bills, View Reporting, Manage Your Listings

Business Websites

Honeypot Technique of Blocking Spam

Honeypot Technique of Blocking Spam

By | 05.29.13
Honeypot Technique of Blocking Spam

UPDATE: Check out Kim’s newest post on “How to Spam Proof Your Website Forms” for the latest info on blocking spam.

In an earlier post I discussed the mystery of forms. Preventing spam on your blog or website can be difficult for anyone as bots and spammers are relentless. However, with the right techniques the battle can be won! One of my favorite techniques to use against bots trying to spam a form is the honeypot technique, because it doesn’t hinder the user from completing the form. Anti-spam techniques should not interfere with a user filling out the form, it could decrease lead conversions. An example of this kind of technique is Captcha.

When a spam bot comes to a form, it fills out EVERY input field, and ignores the CSS, which is a behavior we can exploit. One of the input fields can be hidden with CSS, display: none;, and then use JavaScript when the form is submitted. If the input field is empty submit the form, else, do nothing (or popup an alert message). Easy, right? The user is none the wiser, and we prevent spam bots from submitting the form with junk data.

The CSS:
Let’s get a little technical and show two different ways of handling the CSS. The first example is with a CSS3 attribute selector. Please note that IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified, which should be standard practice. Attribute selection is not supported in IE6 or below.

input[type="text"]#website { display: none; }

The old school way of doing things, but supported by IE6.

input#website { display: none; }

Let me explain the difference. There are several types of inputs: submit, button, password, text, and so on. Now with HTML5 there are even more: tel, number, date, etc. Using input with our unique id allows this style to be set on ANY input type that has this id. By adding [type="text"] it is limiting the style to input types of text that contain this unique id. It’s just a matter of personal preference which method you use and how global the style needs to be.

The JavaScript (jQuery):

        if ($('input#website').val().length != 0) {
            return false;


<form method="get" action="/">
<input name="firstname" type="text" value="First Name" />
<input name="lastname" type="text" value="Last Name" />
<input id="website" name="website" type="text" value=""  />
<input type="submit" value="Submit" />

In the example above the website field is hidden with CSS because of id="website". A user enters first and last name and submits the form. If the website field has text in it then the form will do nothing when submitted as you can see by the return false in the JavaScript function. If the field is empty the form will submit as expected.

Things to remember for the novice.
Script and CSS references go in the <head> tag, HTML goes in the <body> tag. Classes can be used throughout the web page and referenced unlimited times, but id’s are unique and used only once. Using a jQuery function requires the jQuery library reference, which can be found here. Always declare a !DOCTYPE if using CSS3 so less modern browsers behave properly. Remember, the web is fun. Enjoy!

Update: The above technique will work on spammers that do not ignore JavaScript. However, spammers that do ignore JavaScript, a server side technique would be a better solution.

If you’re worried about spam, you may be worried about your business’s online presence. Curious to learn more? Thryv helps business owners thrive.

Updated March 12, 2018.

(Visited 21,348 times, 14 visits today)

Like what you see?
Get more free content.

Next Up In Business Websites

[Video] Why Your Website Needs a Mobile-First Design

Did you know 88% of online customers won’t return to a website after a bad experience? Now, try viewing...

Read More

Is Google’s Featured Snippet Killing Your Website Traffic?

If you’re like many small business owners, you might think your website traffic comes from Google searches for local...

Read More

Making the Most of Every Website Visit AKA Conversion Rate Optimization

So you’ve gotten your business website all set up. It looks great, the navigation is user-friendly, and it has...

Read More

Explore the Blog