You're seeing a new tab open with the JSON response from a POST request because the form submission is not being handled correctly, likely due to incorrect settings in the form's Action or submission behavior.
1. Webflow Forms Expect Specific Response Format
- Webflow expects form submissions to return a JSON response with a specific format to display success or error messages in the page.
- Valid JSON response structure should include a
success key for triggering the Webflow Success Message UI behavior.
2. You're Linking to an External Webhook Directly
- If the Form's Action points to an external endpoint (like Zapier, Integromat/Make, or a custom webhook), Webflow does not manage the form state.
- As a result, it doesn't handle the server's response, and the browser might redirect or display the response in a new tab, especially if you're not preventing the default submit behavior.
3. No event.preventDefault() Handling
- Unless you’re using custom JavaScript to call the webhook via
fetch() or XMLHttpRequest() and manually update the form UI (e.g., show success or error message), the response from the external server is simply rendered by the browser.
4. How to Fix It
- Option 1: Use Webflow’s Native Form Handling
- Leave the Form Action URL blank so Webflow handles submission natively and allows success/error messages to work.
- Use Webflow's built-in integrations (like Zapier or Make) that listen to Webflow form submissions.
- Option 2: Use Custom JavaScript to Handle Form Submission
- Add a
submit event listener using the Before Body tag in Page Settings or embed element. - Use
fetch() to send the POST request to your webhook. - Use JavaScript to show/hide
.w-form-done or .w-form-fail blocks automatically depending on the response.
5. Avoid Setting Action to Webhook URL Directly
- A direct form action to a webhook endpoint causes a full browser request, including possible redirect or response rendering.
- Instead, intercept the submit event, send the data via script, and manage UI manually.
---
Summary
Webflow doesn't manage form success/error messages when the Form Action is set to an external webhook. To keep Webflow’s success message visible, either use Webflow’s native form handling with integrations or use JavaScript to send the POST request and manually trigger success UI behaviors.