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.
- Add a text field to your Webflow form as a honeypot, apply a class like “honeypot,” and use CSS to position it off-screen.
- Customize your form notification email to manually include only desired fields, excluding the honeypot.
- Use backend tools (e.g., Zapier, Make) to filter out form submissions where the honeypot field is filled.
Yes, it's possible to create a hidden honeypot field in a Webflow form that’s not visible to users and doesn't show up in email submissions. This helps filter out bots while keeping the field intact for backend filtering.
1. Add a Honeypot Field to Your Form
- Go to your form in Webflow Designer.
- Add a new Text Field and give it a clear honeypot-style Name/ID like
websitemoreinfo. - Optionally, give it a Label like “Don’t fill this out if you’re human.”
2. Hide the Field from Human Users (Not Bots)
Avoid using the standard "Hide" setting (display: none), as many bots can detect hidden fields that use CSS display: none.
Instead, use one of these methods:
- Positioning Method (Preferred by Webflow Anti-Spam Support):
- Set the field’s class to something like “honeypot”.
- Apply custom styles under the Page Settings → Inside <style> tag in <head>:
```
<style>
.honeypot {
position: absolute;
left: -9999px;
}
</style>
```
- This keeps the field in the DOM and visible to bots, but off-screen for humans.
3. Prevent the Honeypot Field from Appearing in Email Submissions
Webflow includes all form fields in form submission emails by default. To prevent the honeypot from appearing:
- Do not reference the field’s label or value in your Form Notification Settings.
- Instead of using {{ form_data }} (which outputs all fields), manually list each field you want to include in the email body.
- Go to Project Settings → Forms → Form Submission Email Body, and customize the content like this:
```
Name: {{ name }}
Email: {{ email }}
Message: {{ message }}
```
- Exclude the honeypot field (e.g.,
websitemoreinfo) from this list.
4. Filter Spam Using Your Email Provider
- Since the honeypot field still exists in the form data (just not in email body), it can be checked by backend systems.
- Many email tools or automation platforms (like Make, Zapier, or Mailparser) can read the full form payload including hidden fields.
- Use these tools to discard submissions where the honeypot field is not empty.
Summary
Add an off-screen honeypot field in your Webflow form, exclude it from email templates by customizing the notification body, and use your email software to filter submissions where the honeypot field is filled. This lets you keep the field name intact while preventing spam.