What causes the error message to appear when clicking on the form on a Webflow-built site?
TL;DR
- Check Form Action Settings to ensure it's correctly configured.
- Verify Webflow’s form submission limits and upgrade if needed.
- Inspect reCAPTCHA settings and disable it temporarily for testing.
- Ensure correct form IDs and names in Webflow and custom code.
- Check email notification settings and third-party integrations.
- Debug using browser console and network tab for errors.
- Disable browser extensions or firewall and test in incognito mode.
An error message when clicking on a form in Webflow can occur due to various reasons, such as missing form settings, spam protection failures, or backend issues.
1. Check Form Action Settings
- Go to the Form Block in Webflow Designer and select the form element.
- Open the Element Settings (gear icon) panel.
- Ensure the "Action" field is either blank (for Webflow’s default submission handling) or correctly configured if pointing to an external service.
2. Verify Webflow’s Form Submission Limits
- Webflow’s free plans limit form submissions and may disable them if exceeded.
- Check the Project Settings > Forms tab for warnings about submission limits.
- Upgrade to a paid plan if necessary.
3. Inspect reCAPTCHA or Spam Filters
- If you’ve enabled Google reCAPTCHA, ensure your keys are correctly configured in Project Settings > Forms.
- Disable reCAPTCHA temporarily to see if it resolves the issue.
4. Confirm Correct Form Names and IDs
- Avoid using duplicate form IDs or name attributes in custom code or embed blocks.
- If using custom JavaScript, ensure it targets the correct form-selector class or ID.
5. Check Email Notification Settings
- Webflow restricts form submissions to its default email notification system.
- If using third-party integrations (e.g., Zapier, Make, or custom API), verify they are properly set up.
6. Debug with Browser Console and Network Tab
- Open Developer Tools (F12 or right-click > Inspect Element).
- Check the Console tab for JavaScript errors.
- Switch to the Network tab and look for failed POST requests when submitting the form.
7. Bypass Browser Extensions or Firewall Interference
- Disable ad blockers or privacy extensions, as they may block form submissions.
- Test the form in an incognito window or a different browser.
Summary
An error message when clicking a Webflow form usually results from misconfigured form settings, submission limits, spam protection issues, or browser interference. Check form action settings, submission limits, reCAPTCHA keys, and debugging tools to identify and fix the issue.