Building a Honeypot Field That Works | CSS-Tricks
Briefly

Building a Honeypot Field That Works | CSS-Tricks
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).
"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: &lt;script&gt; import { Honeypot } from '@splendidlabz/svelte' &lt;/script&gt; &lt;Honeypot name=&quot;honeypot-name&quot; /&gt;"
"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: &lt;input class=&quot;honeypot&quot; type=&quot;text&quot; name=&quot;honeypot&quot; /&gt; &lt;style&gt; .honeypot { display: none; } &lt;/style&gt; For now, placing the &lt;style&gt; tag near the honeypot seems to work. But you might not want to do that in the future (more below)."
Read at CSS-Tricks
Unable to calculate read time
[
|
]