Patternite Logo

Simple, CAPTCHA-free contact form in React

0

A simple contact form pattern that uses a honeypot and time trap to prevent spam and avoid having to use CAPTCHAs

Loading...

ContactForm uses two techniques to help prevent spam - namely a honeypot and a time trap, without relying on UX damaging or privacy invasive CAPTCHAs. Note that this pattern is by no means the most effective approach to preventing spam, however it should be sufficient to protect against basic spam bots.

The honeypot

In MyForm we add a form field as in lines #32-35. This field is invisible to most users, but not to bots. Simple spam bots tend to fill out all fields in a form to pass validation, so this honeypot catches this behavior and locks out the form in line #17. Note: screen readers will identify this field, so make sure to label the field clearly, indicating it's not to be filled out. Additionally, you may want to prevent the user from accidentally navigating to the field through use of the "tab" key for instance.

The time trap

By checking how quickly the user fills out and submits the form, we can stop bots that fill out the form inhumanly fast. We've defined a MINIMUM_TIME variable (line #6) which specifies how long a user must spend on the form before the submission is considered legitimate (5 seconds in this example, though you may want to reduce this if many of your fields can be autofilled by the browser). On line #10 we get the time of the component render, then check in the handleSubmit function that at least MINIMUM_TIME has elapsed (line #17).

If the user fails either the honeypot or time trap, the form will be permanently locked (until refreshed) to prevent a bot from simply trying again to submit.

Profile picture for duncster

| edited

Patternite © 2021

Patternite Logo