Your form in Webflow submits on staging but fails on the live site with a 500 Internal Server Error and a CORS policy error due to an environment or domain misconfiguration.
1. Confirm Allowed Domains in Webflow Form Settings
- Go to Project Settings > Forms tab in Webflow.
- Make sure your live domain (e.g., www.yourdomain.com) is listed under Form Submission Whitelist.
- If only your staging domain (e.g., your-site.webflow.io) is listed, Webflow blocks form submissions from the live site due to CORS restrictions.
2. Publish to the Correct Domain
- After updating the domain list, publish your site to both the staging and live environments.
- Use Publish > Select your custom domain and the Webflow.io domain to ensure both platforms receive the updated configuration.
- If you're using a custom form action URL (e.g., sending form data to Airtable, Zapier, or an API), ensure:
- The external server accepts your live domain in the CORS headers (Access-Control-Allow-Origin).
- The API endpoint is functioning and not returning a 500 error itself.
4. Test with Browser Console and Network Tab
- Open your site on the live domain and press F12 or right-click > Inspect > Network tab.
- Submit the form and examine:
- The HTTP response code (500) to see the full error message.
- CORS errors in the console to identify if the origin is blocked.
- If you are using Webflow's native hosting and form system:
- Ensure form elements are intact (don’t rename/remove
form
, input
, or submit
attributes). - Do not override the
action
attribute unless intentionally using a custom backend.
Summary
Your form fails on the live domain due to missing whitelist entries or misconfigured CORS headers. To fix this, add your custom domain to the Form Submission Whitelist in Webflow, republish the site, and verify any external API connections also support your live domain.