Webflow sync, pageviews & more.
NEW

Is it possible to create a hidden honeypot field in a Webflow form that doesn't display in the email submission? I want to automatically filter out spam emails using an email software provider without removing the honeypot field name.

TL;DR
  • Add a non-required text or email field to your Webflow form with a bot-attracting name like "website" or "phone_number".
  • Hide the field using CSS (display: none) so it's invisible to users but still in the DOM.
  • Keep the field name intact to enable spam filtering via email or automation tools like Zapier.

Yes, you can create a hidden honeypot field in a Webflow form that helps filter out spam and ensure it doesn't appear in the email notification, while still retaining the field name for filtering in your email software.

1. Add the Honeypot Field

  • Go to your Webflow form in the Designer.
  • Add a new form field (use a Text Field or Email Field).
  • Set the Field Name to something like website or phone_number to attract bots.
  • Mark the field as not required.

2. Hide the Field from Human Users

  • Select the honeypot field and go to the Settings Panel > Custom Attributes.

  • Add a new attribute:

  • Name: style

  • Value: display:none
    or

  • Add a class to the field (e.g., honeypot) and set display: none; in the Styles panel.

  • Make sure the field is still in the DOM but not visible to human users. Avoid using hidden input, as bots can detect those as traps.

3. Prevent Field from Appearing in Email Notifications

  • Webflow's default form submission email includes all submitted fields.
  • To filter out the honeypot submission in your email provider, leave the honeypot field visible in form submissions, but:
  • Use filtering rules (like in Zapier, Make, or custom email processors) to check if the field has a value, and ignore or mark as spam.
  • Do not remove or blank the Field Name, as the email software needs the field label to apply filtering rules.

4. Optional: Use Custom Script for Filtering

  • If you’re using a 3rd-party form processor (like Formspree, Make, or Zapier), you can add a script to ignore forms where the honeypot field is not empty.
  • If staying within Webflow, rely on your email provider or form automation tool to apply filtering rules.

Summary

Create a hidden field using CSS (display: none) in your Webflow form as a honeypot. Keep the field name visible so your email provider or form processor can detect it during spam filtering. Avoid removing the name or using <input type="hidden">, which may reduce effectiveness.

Rate this answer

Other Webflow Questions