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:
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:
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:
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.
More sophisticated bots (and smart hackers) could have some rules that can discover Honeypot fields and might be able to omit them. It’s better to avoid names that are obvious to bots. This is why:
A good class would be <code>extra-form-input</code> or our beloved <code>form-input-(x)</code>, where x is the next free number or a word).
If you’re looking for more detailed information on Honeypot, you can check this documentation.
We hope these tips will let you keep your Webflow safe from bots and spammers and scale your business even more efficiently!
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.