Handling form submission success

Design help Custom code
1

Hi, I’m trying to track when form submission is successful so i can send data to google analytics. I’m using this code for this.

    var form = $('#yourForm');

    // Add a submit event handler
    form.submit(function(event) {
        // Prevent the default form submission
        event.preventDefault();

            // If the form is valid, submit it asynchronously using AJAX
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize(),
                success: function(response) {
                    // Handle success
                    console.log('Form submitted successfully:', response);

                    // Optionally, you can perform actions based on the server's response
                    // For example, display a success message, redirect, etc.
                },
                error: function(error) {
                    // Handle errors
                    console.error('Form submission failed:', error);
                }
            });
});

It would work nicely if there is no CORS policy blockade that im getting

datagoat-testing-page-1221:1 Access to XMLHttpRequest at ‘https://gmail.us21.list-manage.com/subscribe/post?…’ from origin ‘https://website.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Is there any alternative to handle successful form submission? Currently I’m validating if all form fields are valid, but this can lead to multiple form submissions and sending data to ga4 as if more than one user submitted form

2

Are you trying to submit to the standard Webflow form submission handler?

If so, I’d probably write a mutation observer to detect whether the success message becomes visible, and then set GTM datalayer info with whatever I’d like to capture. GTM is generally an easier route to tracking data in GA4.