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.
