Building a Honeypot Field That Works | CSS-Tricks

"Honeypots are fields that developers use to prevent spam submissions. They still work in 2025. So you don't need reCAPTCHA or other annoying mechanisms. But you got to set a couple of tricks in place so spambots can't detect your honeypot field. I've created a Honeypot component that does everything I mention below. So you can simply import and use them like this: <script> import { Honeypot } from '@splendidlabz/svelte' </script> <Honeypot name="honeypot-name" />"

"Do not hide the honeypot with inline CSS. Bots today are already smart enough to know that these are traps - and they will skip them. Here's what you need to do instead: A simple example that would work is this: <input class="honeypot" type="text" name="honeypot" /> <style> .honeypot { display: none; } </style> For now, placing the <style> tag near the honeypot seems to work. But you might not want to do that in the future (more below)."

Honeypot fields remain an effective anti-spam technique in 2025 when implemented and disguised correctly. Do not hide honeypot fields with inline CSS because modern bots detect such traps. Placing a nearby <style> tag that sets the honeypot to display:none works for now, though detection may evolve. Attributes like aria-hidden, autocomplete=off, and tabindex="-1" are unnecessary because display:none already prevents selection and screen-reader focus. Future-proofing requires avoiding obvious names such as spam or honeypot and using legitimate-sounding name attributes (for example website or mobile) and innocuous CSS class names (for example .form-helper).

Read at CSS-Tricks