Honeypot

Example#

Usage#

Use a honeypot and a timestamp on public forms to turn away most spam bots without a CAPTCHA. The honeypot is a field people never see; the timestamp records when the form appeared. checkSpam on the server rejects a filled honeypot or a send faster than 2.5 seconds.

• Honeypot sits off-screen (not display: none, which bots skip), holds a labelled field "Leave this field empty", is out of the tab order and has autocomplete off.
• FormTimestamp fills a hidden input with the time on mount, on the client, so static pages do not stamp the build time.
• checkSpam(formData) returns { spam, reason }; a missing timestamp is not spam.

Anatomy#

1. Honeypot: an off-screen div.mk-honeypot with a labelled text input, hidden from assistive tech and out of the tab order.
2. Timestamp: a hidden input named _t, filled when the form mounts.

Neither prints anything, so there is nothing to draw.

Volume#

Neither prints anything, so both are the same at every volume.

Content#

• The honeypot's label, "Leave this field empty", is the only copy, and only a bot ever reads it.

Do and don't#

<Form action="/api/quote">
  …fields…
  <Honeypot />
  <FormTimestamp />
</Form>

Accessibility#

• The field is off-screen, aria-hidden and out of the tab order; people never meet it.
• On the server, checkSpam(formData) flags a filled honeypot or a submit faster than 2.5 s.

The colour pairs it prints, with their contrast on both papers:

It prints no text of its own (art layer or layout only), so it has no pair to check.

Props#

Tokens#

It reads no --mk-* token of its own: it lays out the components inside it.

Changelog#