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>
- Find the name of your form.
- 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.
