A simple approach without negative usability impact
Website "Contact Us" forms are pretty common and quite useful to provide users with a way to quickly get in touch with the other side. The issue is that they also might be a source of unwelcome spam emails.
During the development of the new website for Kaizen Institute Consulting Group I had to find a way of stopping the spam messages we were getting due to the contact form used at the time. They weren't few because the website was a 11K+ per month hits (now is more like 15K).
So the first thing that crossed my mind was CAPTCHA but this always has a negative impact in usability as you force the user to make an extra effort to get in touch with you and that's never a good idea. So I wanted something that was completely transparent for the user. Thus, I did two small things:
- Add an input field with a class that had {display:none;} on the css file (not as an element style). If that field had content on the POST parameters the server would simply drop the request.
- Forced the from submission to be done through AJAX (when doing the submission by AJAX I would add a POST parameter indicating it was an AJAX request and checked that on the server side)
The first is a very well known way to do it but I've actually seen people saying to add the {display:none;} to the element style attribute which isn't very smart. We actually had this issue on our website. We tested directly on the element and on the css file and in the first scenario we got spam but never on the other.
The second has a theoretical downside: "What if the user doesn't have the JavaScript enabled ?", I'll be blunt on this:
- Firstly the "You always need to fallback to pure HTML if the user doesn't have JS activated" requirement makes very little sense nowadays, unless we are talking about SEO. Designing the website in a way where some pages are only accessible to users with JS enabled is not a cleaver move because search engines might have issues with javascript. Not doing AJAX because the user might turned off JS is stupid.
- Secondly, the type of user that visits our website (we are a consulting company) isn't probably worried with JS being activated or not.
So to sum up, before adding a CAPTCHA or doing something more complex just try to add a class to the element, hide it on the css file and make the form submission through AJAX.
