How can we disable the automatic form bindings in Webflow's webflow.js script on certain forms or on our entire site?

Published on
September 22, 2023

To disable the automatic form bindings in Webflow's webflow.js script on certain forms or on your entire site, you can follow these steps:

  1. Open your project in the Webflow Designer and navigate to the page or form where you want to disable the automatic form bindings.

  2. Select the form element by clicking on it.

  3. In the right-hand sidebar, go to the settings tab (gear icon).

  4. Scroll down to the "Form Settings" section.

  5. Toggle off the "Enable​ form submit" option. This will prevent the form from automatically binding to Webflow's form submission behavior.

  6. If you want to disable the automatic form bindings on your entire site, you can repeat these steps for every form on each page.

  7. Once you have made the necessary changes, publish your site for the changes to take effect.

By disabling the automatic form bindings in Webflow, you have more control over how your forms behave and can implement custom form submission handling if needed.

Additionally, if you prefer to disable form bindings using custom code instead of the Webflow Designer, you can use JavaScript to programmatically disable the submission behavior. Here is an example:

// Disable form submission behaviordocument.addEventListener("DOMContentLoaded", function() {  var forms = document.getElementsByTagName("form");  for (var i = 0; i < forms.length; i++) {    forms[i].removeAttribute("data-wf-form");  }});

This code snippet targets all form elements on the page and removes the data-wf-form attribute, which is responsible for enabling Webflow's form submission behavior. Place this code in the custom code section of your project settings or on specific pages where you want to disable the form bindings.

To summarize, to disable automatic form bindings in Webflow's webflow.js script on certain forms or the entire site, you can either use the Webflow Designer to toggle off the "Enable form submit" option or use custom code to programmatically remove the data-wf-form attribute from the form elements.

Additional Questions:

  1. How can I customize form submission handling in Webflow?
  2. Is it possible to re-enable the automatic form bindings in Webflow after disabling them?
  3. What are some alternative solutions for handling form submissions in Webflow?