Why am I experiencing issues sending a form with file uploads, custom code for date pickers, and countries on Webflow? I was able to send it once but now I'm getting an error message stating "Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

You're encountering a CORS policy error when submitting a Webflow form with file uploads, custom code (date pickers and country fields), which likely indicates an issue with where the form is trying to send the data or how your custom code modifies the submission behavior.

1. Check the Form Action URL

• Go to Webflow Designer, select your form, and check the Form Settings panel.
• Ensure the Form Action is either blank (for Webflow-hosted submissions) or points to the correct external endpoint (if you're using services like Zapier, Make, or a custom backend).
• If it's pointing to an external server, that server must include the appropriate CORS headers (Access-Control-Allow-Origin).

2. Review Your Custom Code

• Check if your custom JavaScript intercepts the form submission using XMLHttpRequest or fetch.
• If you're using fetch or XMLHttpRequest directly, the server receiving the request must allow cross-origin requests by including the Access-Control-Allow-Origin header.
• Inspect console logs in Chrome Developer Tools to confirm whether the request is blocked due to cross-origin constraints.

3. Validate File Upload Configuration

• Webflow’s native forms with file uploads do not support submission to third-party endpoints directly.
• If you're trying to send file uploads to an external service, you must:
• Use a service that supports CORS.
• Include the required CORS headers on the receiving server.
• Alternatively, use a third-party file uploader (e.g., Filestack, Uploadcare) integrated via custom code and bypass Webflow’s native form submission.

4. Troubleshoot Third-Party Services

• If you're using Zapier, Make, or custom APIs, ensure:
• The endpoint is configured to accept cross-origin requests.
• It’s not returning redirects, which can also trigger CORS errors if improperly handled.
• Any authentication headers or method restrictions are correctly applied.

5. Test Without Custom Code or Uploads

• Temporarily remove custom scripts (date picker, country dropdown) to isolate whether they affect form submission.
• Try a form submission without a file upload to determine if that’s the issue.
• If one version works and another doesn’t, reintroduce features step-by-step to find the exact cause.

Summary

Your form is blocked due to a CORS policy violation, likely triggered by submitting to an external endpoint without proper CORS headers. Check the form action URL, verify your custom scripts don’t hijack submissions improperly, and ensure any third-party API or server you’re using properly supports CORS with the required headers (Access-Control-Allow-Origin).