Select an Account to Sign In

Thryv

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):

<script>
$('form').submit(function(){    
        if ($('input#website').val().length != 0) {
            return false;
        } 
});
</script>

The HTML:

<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" />
</form>

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 15,392 times, 33 visits today)
Comments

Like what you see?
Get more free content.

Next Up In Business Websites

Scarily Popular Business Website Trends to Avoid in 2019

Some trends are so ridiculous they’re just…scary. Fidget spinners, unicorn everything, and the extreme hype over tacos (maybe those...

Read More

[Video] Convert More Leads with a Killer Website

Many business owners see their website as a sort of…digital billboard. If that’s the case, then its only real...

Read More

Do You Have a Sticky Website? How to Get Consumers Stuck on Yours

What on Earth does the word “sticky” have to do with your business website? If you’re like me, the...

Read More

Explore the Blog