An approach to detect when a form is submitted in Webflow using mutation observer

If you've used Webflow and Webflow forms before, you'll know how simple it is to get a form up and running on your website.

You can even link your form submission to third-party automation tools like Zapier.

One common challenge is detecting when a form submission is successful and performing side effect logic within the page. For instance, you may want to display the form again so that users can fill it out multiple times.

What makes this difficult?

Well you know that, you can override the form onsubmit event and submit the form with your own logic using $.ajax for example but this is not straightforward for several reason and one being the fact that the form markup is dynamically generated by webflow js library (action url, form name, etc...) plus the way the webflow library has very high priority over the submit event against any other script will make your task even harder.
For many other reasons this approach won't be effective.

The way i make it work

Well, we have mutation observers, a new way to observe DOM modifications available in all modern browsers. If you are not familiar with DOM mutation observer please check this article as a starting point.

When user submit a form, the webflow lib will:

• Hide the form and show the success message when the form submission went well
• Show the error message and keep the form in form when the form submission fails Now that we know that we basically need to setup an observer that either check when either the form is hidden or when the success message is hidden.

In the following code snippet i will observe when the form is hidden and alert a message as an example but this side logic can really be anything like showing back the form and hide the success message.

    var form = document.getElementById('myForm');

    // Create a new MutationObserver
    var observer = new MutationObserver(function(mutationsList, observer) {
        // Loop through all mutations
        mutationsList.forEach(function(mutation) {
            // Check if the display property of the form has changed to none
            if (mutation.attributeName === 'style' && mutation.target.style.display === 'none') {
                //you can perfom side logic here
                alert('Form is now hidden, probably the form was submitted');
            }
        });
    });

    // Configure the observer to watch for changes in attributes
    var config = { attributes: true };

    // Start observing the target form element for attribute changes
    observer.observe(form, config);

That is it!

Now whenever your form with id=myForm become hidden you will see the alert in your web page. Feel free to adapt the code with your own logic.

You can use the above script in a webflow embed, page settings, site settings but remember that it is always better to initiate the observer when DOM is ready, so you will likely wrap this in in a DOMContentLoaded event callback

//JQuery short synthax
$(function(){
 //observer code
})

//JQuery most known synthax
$( document ).ready(function() {
  //observer code
});

//or vanilla JS code
document.addEventListener("DOMContentLoaded", (event) => {
  //observer code here
});

Thanks, and happy coding!