Honeypot – the best way to secure your forms

If you’ve ever submitted a form or created an account on the internet, you sure know what spam protection is.

All the websites on the internet have some vulnerabilities, which hackers don’t hesitate to abuse. And when it comes to Webflow, the most important thing to protect is your forms. 

If you own a website, you might want to protect your forms from spam for several reasons:

• To protect your forms from an overwhelming amount of submissions, which may crash your website.
• Do not overuse your bandwidth and Webflow forms & 3rd party limits.
• To avoid overflowing your CRM with fake information.

From time to time, some people ask us if we can help them protect their forms from spam. It’s completely understandable, as it’s really annoying if someone fills your form a hundred times per day, pollutes your CRM, and consumes limits in the usage-based tools you use (like Webflow, Zapier, or Intercom). Worse-case scenario? You can end up losing deals you've missed in this chaos. Or the form submission won’t be saved because you had already hit a form submission limit.

What can you do to protect your Webflow website from spam?

Implement Honeypot

The most common technique we use at Webnomads to make forms safe is Honeypot. It’s a technique that prevents bots from abusing forms. 

Why do we use Honeypot rather than reCAPTCHA? 

Well, reCAPTCHA’s idea is to use a variety of challenges, including image recognition and audio challenges, to verify that the user is human.

At the same time, Honeypot:

• Is less frustrating, as it doesn't require anyone to take more actions than necessary (which can be time-consuming and annoying, especially if users have difficulty solving the riddle). For the same reason, it’s more accessible for users with disabilities.
• Is better for form conversion, as there’s no extra step in the form (the fewer fields in the form, the more likely users are to fill it in).
• Is easy to configure. It requires a bit of Javascript, but there is no need to create an account, set up a 3rd party, etc, which is what reCAPTCHA needs.
• It's better for page performance, as it doesn't require heavy scripts, that Webflow implements once you enable reCAPTCHA

How does it work from the technical point of view?

Honeypot uses hidden fields that users don’t see, but bots do detect. As bots always try to fill out all fields, we can lure them to our trap – if a bot fills out the hidden field, the form submission will be rejected. This way, Honeypot basically blocks all the automated form submission activity.

To set Honeypot in your Webflow project, you need to add a hidden field and unable form submissions when the field is filled out. 

Here’s a step-by-step list:

1. Add an extra field to your form. Remember to set it as not required – otherwise, the normal visitors won’t be able to submit the form.
2. Set a class to the field. Then set a display: none (of use other CSS to hide the input).
3. Add the code from the next section to page settings (or project settings, if you want to use it globally):

That’s all from the technical point of view. 

Once you’re done with the implementation, your users should see a form with some labels (let’s say, name and e-mail). If a bot goes through the site, it will also see an extra field, not realize it’s not required, fill it in, and be quite surprised at not being able to pass by.

‍