Is it possible to customize the Webflow form action and submission to include a GET API call and redirect based on the API result, while still submitting the captured data to Webflow?

Yes, it is possible to customize the Webflow form action and submission to include a GET API call and redirect based on the API result while still submitting the captured data to Webflow. Here's how you can achieve this:

1. Set up your Webflow form: In the Webflow Designer, add a form element to your page and configure the required form fields. Make sure the form has a unique ID assigned to it.

2. Add custom code: Go to the Project Settings in the Webflow Designer and navigate to the Custom Code tab. Insert the following JavaScript code into the Footer Code section:

<script>  // Customize the form submission  document.addEventListener("DOMContentLoaded", function() {    // Get the form element    const form = document.getElementById("your-form-id");    // Add a submit event listener    form.addEventListener("submit", function(event) {      event.preventDefault(); // Prevent the default form submission      // Get the form data      const formData = new FormData(form);      const capturedData = {};      // Loop through each form field      for (let [key, value] of formData.entries()) {        capturedData[key] = value;      }      // Call your API with capturedData and handle the response      fetch("your-api-endpoint?data=" + encodeURIComponent(JSON.stringify(capturedData)))        .then(response => response.json())        .then(result => {          // Determine the redirection based on the API result          if (result.success) {            // Redirect to a success page            window.location.href = "/success";          } else {            // Redirect to an error page            window.location.href = "/error";          }        })        .catch(error => {          // Redirect to an error page in case of API error          window.location.href = "/error";        });      // Submit the captured form data to Webflow      form.submit();    });  });</script>

Make sure to replace "your-form-id" with the actual ID of your Webflow form element.

1. Set up API endpoints: You need to have the appropriate API endpoints in place to handle the GET request from your Webflow form. Make sure to handle the captured data and return the appropriate response (e.g., JSON response with success: true/false).

2. Create success and error pages: In your Webflow project, create the success and error pages where you want to redirect your users based on the API result. Customize these pages according to your needs.

That's it! Now, when a user submits the form on your Webflow site, it will trigger the custom JavaScript code. It will capture the form data, make a GET API request, and redirect the user to the appropriate page based on the API response. Simultaneously, the form data will also be submitted to Webflow as usual, allowing you to see it in the Webflow Form Submissions panel.

Additional Questions:

1. How can I customize the Webflow form submission with a POST API call instead of a GET API call?
2. Can I integrate a third-party email marketing service with Webflow forms?
3. Is it possible to validate form data before submission in Webflow?