How To Stop Form Bots With Honeypot Fields

Spam bots are the worst.

They can ruin a good contact form in a heartbeat.

While getting rid of spam bots requires a lot of strategy and technology, simple honeypots are quite effective for their low effort.

What is a honeypot?

In the world of cybersecurity, there are many types of honeypots, but they are all essentially bot traps.

Today we are talking about honeypots used in frontend forms.

When bots spam your contact form, they must read the page source to “see” what to fill out. The good news is bots don’t “see” like humans.

This is precisely what a honeypot exploits.

The process will look a little something like this:

Create a fake input inside a form
Hide it from the human users but not the bots
Filter for the field in your backend

It would look something like this.

Setting up the honeypot field

Let’s pretend we have a basic contact form:

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send</button>
</form>

Bots will fill out every input and submit our form, so we need to add our honeypot.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <div class="phone">
   <label for="phone">Phone:</label>
   <input type="text" id="phone" name="phone">
  </div>

  <button type="submit">Send</button>
</form>

We added an extra field called phone. This field should not be visible to the user but should be visible to bots. To hide the field, we can add a simple CSS rule.

.phone {
    display: none;
}

The user will not be able to see our honeypot, but bots will. And when they see it, they will most likely fill it out, which means we have them trapped.

Make sure you pick a good name for the honeypot

Before we discuss how to deal with this extra field in our backend, I want to point out one thing.

The name of our honeypot shouldn’t be random.

These bots are aware honeypots exist.

They have logic that filters out any irrelevant inputs when completing forms.

So if we create a field called random or, even worse, honeypot, we tell the bot the field is a trap, so they should avoid it.

Instead, we should consider related topics or fields related to the form.

In most contact forms, that means we’d add anything related to contact details like:

Trap the bot and kick it out

Now that we have the honeypot set up on the frontend we need to handle it in our backend.

I set up a pseudo-express route to show the basic logic of handling this extra field.

app.post('/submit', (req, res) => {
    const { name, email, message, phone } = req.body;

    if (phone) {
        // If the honeypot field is filled, it's a bot
        console.log('Potential bot detected');
        res.status(400).send('Bad request');
    } else {
        // Process the legitimate submission
        console.log('Legitimate submission:', { name, email, message });
        res.send('Thank you for your submission!');
    }
});