forms – What is the best way to hide a Honeypot Captcha?

I hide the honeypot field using some positioning/clipping as I suspect display: none is a clue to a spambot to avoid the field. At the least, it’s a possibility.

However, I appreciate it seems a lot for a bot to parse the HTML class and find the property value pair in the CSS itself. I wonder if class names such as hide alert the spammer? That would be a lot easier to figure out.

Ideally, we’d make the form as usable and easy as possible and deal with any spam that generates away from the user. The problem here can be financial, especially if you’re running a static/headless site, as most form services charge for the number of submissions you generate. For example, Netlify will give you 100 submissions a month for free, but then they’ll charge.

My anecdotal evidence was that more spam appeared to get through my Netlify forms when I was using display: none. Of course, Netlify’s own spam filter may have improved, so I can’t be sure the clipping/positioning approach made a difference.

If you are hiding the form rather than blitzing it a screen reader will still announce it. This is one of the few occasions where display: none makes something more usable as it means one less field to interpret and navigate for a screen reader. However, I don’t think it’s right to say not using display: none is inaccessible; as long as the honey pot field has a label that makes it obvious the field should be left empty, it’s accessible.

I guess there’s also the possibility that spam bots scan the label text to identify honey pot fields. This poses another problem – how do you avoid words like robot and spam in the field label?