HTML form honeypots and autofill/autocomplete
Posted November 11th, 2010 in HTML and CSS
A honeypot field in an HTML form is a hidden input field designed to work out whether or not it is a spam bot submitting your contact form, comments form or similar. For some reason I've never actually covered this myself on this blog so will point you in the direction of a couple of other blogs which explain how these work, and then talk about an issue I discovered recently with autofill in Google Chrome. It may also be an issue with auto complete in other browsers.
What's a honey pot field and how does it work?
As I mentioned above I've never actually covered this myself and rather than repeat what's been posted many times before, here's some other blog posts which cover them in good detail. I found them from searching Google.
- Stopping spambots with hashes and honeypots at Ned Batchelder's blog
- How We Beat Comment Spam at RustyLime
- Beating comment spam: Improving the Honey Pot also at RustyLime
A really basic summary of the above posts is that spambots generally complete all form fields, so by making one present but not visible to humans we can work out that if the field was completed, then they are not a human.
Issues with field naming and autofill/autocomplete
I discovered very recently that it pays to be very careful with the naming of the hidden form field, because they can still be completed by the web browser's autofill or auto complete function, even though they are not visible.
In particular I had this problem with Google Chrome. I do not know if it affects other browsers.
On one website I had a hidden input field similar to this, where the fieldname is "comments":
<input type="text" name="comments" value="" id="comments_field" />
This one tripped me up personally when I was testing submitting an entry into a competition on one of my own websites. I started typing my name into the name field and chose one of the entries from Chrome's autofill drop down. When I submitted the form I got back my error message telling me the form data could not be submitted etc.
"Comments" will be a very common name for fields on forms so it's not surprising that autofill completed this from some other form I'd completed in the past.
On another website there was one like this, where the fieldname is "notes":
<textarea name="notes" rows="5" cols="50" id="formfield_notes"></textarea>
I never managed to trigger this one myself but I know one of the visitors to the website probably did, because they contacted the company saying that they were told after submitting the form that they hadn't completed all the fields marked in red even though there were none marked.
At first I thought maybe it had been a "user issue" but later came to the conclusion it was probably because of the honeypot field and auto fill completing that field because it has a fairly common name.
If you use honeypot fields in your HTML forms then be very careful about what you name them. Try to avoid using common fieldnames and even add some garbage to the end of the fieldname to make them unique and not subject to auto completion, e.g. "comments_or_notesA44". Then test it and see if it still keeps the spam bots at bay.
You could potentially put autocomplete="off" into the form field but it would pay to test this out because the spambots may potentially not complete the field. I must try this myself some time.