This brief post explains how to disable the submit button while a form is submitting in Webflow.
⚡ 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" name="name" />
<input type="email" name="email" />
<input type="submit" value="Submit" data-wait="Please wait..." />
</form>
</body>
</html>
Note: the submit button's data-wait attribute stores your forms' Waiting Text value.
- 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
$('form[data-name="Email Form"]') // <- Replace "Email Form" with your form name
// 2. Define a submit handler
.submit(function (e) {
// 3. Find the button
const submitButton = $(e.target).find("input[type=submit]");
// 4. Disable the button
submitButton.prop("disabled", true);
// 5. Get the value of the data-wait attribute
var waitingText = submitButton.attr("data-wait");
// 6. Update the button text
submitButton.attr("value", waitingText);
return 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.
