Avoid HTML form spam using CSS

An approach of avoiding HTML form spam is using CSS. Non-human spammers usually fills out every input field in a form and submit it, and to overcome this kind of spam you must be able to differ between real human form submits and non-human spam. A technique to distinguish between non-spam and spam is using CSS; the basic idea is to make an extra dummy input text field in your form, and using CSS to make it invisible to the real human users. Thereby, if a post is sent to your php script handling the request and this extra text field contains information, you know that the submit must be spam, and the script can ignore the post.

Here is a small example form:

Name:



Comment:

  
 

The human text field is used for detecting spam, you might call it something else than “human”, however this should be hidden by using CSS such that it is not visible for the user on the webpage. This can be achieved add the following to your CSS file:

#human {
visibility:hidden;
display:none;
}

The solution is as you see very to implement and proves to be effective.

Additional notes:

Using JavaScript to hide the dummy input text field is also an option. E.g. using a JavaScript Framework like Prototype.js it can be done with one line of code:

$('human').hide();

More information on hiding elements using prototype.js.