Is it possible to have a custom form action to pass form data to a URL, while also submitting the form data from page 1 to Webflow using the default action?
TL;DR
- Use JavaScript to handle dual form submission by capturing data on submission and sending it to a custom URL via AJAX, then submit to Webflow.
- Ensure CORS compliance for the custom URL to accept Cross-Origin requests.
Yes, you can create a custom form action to pass form data to a URL while also submitting to Webflow. This typically requires additional scripting since Webflow’s default form action doesn’t natively support dual form submission.
1. Duplicate Form Submission Challenge
- Webflow forms are designed to submit data to Webflow’s servers by default.
- To simultaneously submit form data to a custom URL, you’ll need to incorporate JavaScript for one of the actions, as standard HTML does not support multiple actions.
2. Customize Webflow Form
- Add Form Elements: Make sure your Webflow form contains all necessary input fields.
- Form Action URL: Set the form action to Webflow’s default URL to ensure data still gets submitted to Webflow.
3. Use JavaScript for Custom Action
- Add Custom Code: Use JavaScript code to capture data on form submission.
- Create a Script: In Webflow, go to Project Settings > Custom Code > Footer Code section and embed a script. The script should prevent default form submission, grab the form data, and perform an AJAX post request or fetch to your custom URL.
- Example Workflow:
- Listen for the form submit event.
- Use
e.preventDefault()to stop the form from immediately submitting to Webflow. - Collect input data using JavaScript.
- Send data to your desired URL with
fetchorXMLHttpRequest. - After custom submission, manually submit the form with JavaScript to complete the action for Webflow.
4. Ensure AJAX/Scripts Handle CORS
- CORS Compliance: Ensure the server at the custom URL can handle Cross-Origin Resource Sharing (CORS).
Summary
You can achieve form data submission to both a custom URL and Webflow by incorporating JavaScript to handle the custom action. JavaScript will prevent default submission, collect the form data, and perform an AJAX request to the custom URL before completing the Webflow submission. This approach requires understanding of JavaScript and AJAX to ensure seamless dual submission without loss of data.