How to automatically disable a Webflow button or input

Bjorn Krols

Bjorn Krols

Published on
21 December 2021

At times, you may want the submit button of a Webflow form to be disabled until the user has performed a certain action.

This brief post explains how to automatically disable a Webflow button or input.

⚡ Looking for a form provider for your exported Webflow sites? Check out Formspark.

We will be interacting with the HTML code Webflow generates for its forms, which looks approximately like this (abridged):

<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.js"
      integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <form data-name="Email Form">
      <input type="text" id="name" />
      <input type="email" id="email" />
      <input type="checkbox" id="terms" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
  1. Find the name of your form.
  2. Copy-paste the following code into your page's Before body tag Custom Code section:
<script>
  // 1. Find the form
  var form = $('form[data-name="Email Form"]'); // <- Replace "Email Form" with your form name
  // 2. Find the submit button and disable it
  var submitButton = form.find("input[type=submit]");
  submitButton.prop("disabled", true);
  // 3. Find the terms checkbox
  var termsCheckbox = form.find($("#terms")); // <- Replace "#terms" with your checkbox id (keep the #)
  termsCheckbox.change(function () {
    //  4. Enable the submit button when the checkbox is checked
    if ($(this).is(":checked")) {
      submitButton.prop("disabled", false);
    } else {
      //  5. Disable the submit button when the checkbox is checked
      submitButton.prop("disabled", true);
    }
  });
</script>

Note: we are using jQuery because Webflow includes it by default, and its usage has been widely adopted by the Webflow community.

Don't forget to save and publish your page.

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox weekly.

More like this