.png)
In this video tutorial series, I'm going to show you how to use custom code to take a Webflow form submission and modify the data in any way you want. Then, I'll show you how to send the data to the endpoint of your choosing, all while utilizing the built-in error and success states that Webflow allows you to design.
First l'll show you how to prevent Webflow from handling the form itself. This means that when the form is submitted, Webflow is not going to capture the data. Additionally, Webflow is not going to control the showing and hiding of the error and success states. To do this, we'll get the email form by its ID and then go to its parent element and remove the class "w-form".
After that, I'll show you how to get the Webflow form error and success elements so that we can show and hide those elements later on. I do this by adding some custom attributes and targeting those elements based on those custom attributes. This will allow us to control when the error and success states are shown.
Next, I'll show you how to capture the form data and send it to the endpoint of your choosing. I do this by using the submit event on the form element and then getting the input values and storing them in an object. Then, I use the fetch API to send the data to the endpoint.
Finally, I'll show you how to handle the error and success states in your custom code. This will allow you to design and control the error and success states in any way you want, rather than relying on Webflow's default styles and functionality.
With this custom code, you can easily modify form data and send it to the endpoint of your choice, all while utilizing the built-in error and success states in Webflow. Give it a try and see how it can improve your form design and functionality.
