Combat Form Spam with CSS
Anyone who’s created an online form knows that automated form spam bots are a problem. Here is a simple method that uses CSS to combat this. Once implemented, it has pretty much dropped our spam rate to zero. Special thanks to the Man in Blue for his article: Fighting Spam with CSS.
How it works
In short we’ll simply hide a field using display:none, then after the form is submitted (in PHP, or ASP, etc), we check to see if any value has been inserted into the field. If there is a value in our hidden field – you know it was a bot!
HTML Code
So your html code for the form might be:
<form>
<label>Name:</label>
<input name="name" type="text" />
<label>Email:</label>
<input name="email" type="text" />
<input class="special" name="info" type="text" />
<input type="submit" value="Submit Form" />
</form>
CSS Code
Most likely you would include this in your external style sheet:
.special {display:none}
The Last Step
The last step is to check your submitted form in php or asp, or whatever language you are using to receive the form. If your “info” field has any data at all, it’s a spam bot, and we don’t send it.
March 26th, 2009 at 5:23 pm
Never thought of adding a hidden field, but it makes total sense. Saves me from doing stuff like this 2+2 nonsense on http://orbel.com/contact-us.php
March 27th, 2009 at 9:42 am
[...] See more here: Combat Form Spam with CSS | breakthrough design [...]
April 5th, 2009 at 7:37 am
I’ve been using this method successfully for over 2 years now and it surely beats a lot of other more complicated solutions.
Since I’m the one naming the fields, I go “deeper” with the bot trick by naming the hidden field “email” and the visible field something else.
Bots are more attracted by the “email” field and many of them use email addresses to fill almost every field of you form. So, it’s good to trick them even more.