Implement Honeypot in Conform (Next.js)

[galnir]

I have a page with a basic contact us form that looks like this:

<form
      id={form.id}
      onSubmit={form.onSubmit}
      action={action}
      noValidate
    >
      <LabelInputContainer>
        <Label className="text-white text-lg">Name *</Label>
        <Input
          type="text"
          name={fields.name.name}
        />
        {fields.name.errors ? (
          <p className="text-red-500">{fields.name.errors}</p>
        ) : (
          <br />
        )}
      </LabelInputContainer>
      <div className="hidden" aria-hidden="true">
        <Label htmlFor="last-name">Last name - do not fill this field</Label>
        <input type="text" name="last-name" tabIndex={-1} autoComplete="off" />
      </div>
      <LabelInputContainer>
        <Label className="text-white text-lg">Email *</Label>
        <Input
          type="email"
          name={fields.email.name}
        />
        {fields.email.errors ? (
          <p className="text-red-500">{fields.email.errors}</p>
        ) : (
          <br />
        )}
      </LabelInputContainer>
      <LabelInputContainer>
        <Label>Message *</Label>
        <Textarea
          name={fields.message.name}
        />
        {fields.message.errors ? (
          <p className="text-red-500">{fields.message.errors}</p>
        ) : (
          <br />
        )}
      </LabelInputContainer>
      <SubmitButton />
    </form>

As you can see I have a honeypot field (last-name), and I check on in it the server action:
const isHoneyTrapped = formData.get("last-name");
if it's true I reset the form

Even though I have this field some bots (don't know if all of them) still manage to get through the form. Did I implement the honeypot incorrect or is there a better solution than a honeypot?

[edmundhung]

Hi @galnir, a hidden input might not be enough for smarter spam bots. Maybe take a look of these tutorials from Kent C Dodds or find a reference implementation from remix-utils on both server and client side. The package is designed for Remix but it should apply to NextJS just fine as well.

[galnir]

Thanks! I came to a conclusion that an invincible CloudFlare Turnstile is the way to go, no spam since I implemented it