Honeypot form

Learn how to use a honeypot in Webflow

Here is some great advice and guidance provided by Felippe Regazio. In an article on dev.to, he provided some great guidance and I would recommend reading through the entire post there. I'm also referencing a wonderful article from Rachele DiTullio to make sure it's accessibility friendly. WCAG recommends using honeypots for your forms to deflect bots and keep things accessible.

I was still seeing submissions with this approach, so I modified this and added a tabindex="-1" to the honeypot input to keep screenreaders from focusing it.

Styling your hidden elements

Add in some inputs and make sure they have realistic names that a bot wouldn't be fooled by. Wrap them in a div and add a class. I did this and my class is business. Then I set the CSS in Webflow to the following:

Make sure your hidden input is also set to display:none so that users can't tab over to index it. Or, if you want to leave it with display: block, then you can try adding a custom attribute of tabindex="-1".

Also, make sure the label on for the hidden input has a custom attribute of aria-hidden="true". This will prevent screen readers from reading that label.

Now your form is set so that sighted users and users who rely on assistive technology will never know that hidden input exists.

Using JavaScript to prevent submission

Now you need to use JavaScript to prevent the form from submitting if the honeypot filled is submitted. What I did, was added an event on input that disables the submit button. Feel free to improve this or try other methods.

A lot of the time, folks check to see if it's spam on the backend if that field exists and has been filled out. But, that still allows submissions to go through so set this up in a way that works best for you. Here's my JS I'm using:

Filtering out spam form submissions with Webflow Logic + Honeypot

Credit: Henry Lee, Webflow Technical Support

Webflow has a feature called Logic Flows, that allows us to respond to incoming form data in customised ways.

We can use it to stop spam from submissions reaching our email inbox, if we combine it with our honeypot field.

‍Here’s an overview of how to use Logic Flows.If we use a Conditional Block, we can set our Flow to only send us an Email when the honeypot field is blank:

In this example, I’ve set the Conditional Rule so that if my Honeypot Field submitted value = [blank], then send me an Email Notification.

If the form is submitted with the Honeypot field not blank, meaning a spambot filled it out, then the Logic Flow just terminates right there, and the spam data never reaches our inbox.

This is a useful way to filter submissions automatically, and will work even when the spambot isn’t running javascript.