How to disable the submit button while a form is submitting in Webflow

Bjorn Krols

Bjorn Krols

Published on
08 November 2021

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.

  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
  $('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.

Subscribe to our newsletter

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

More like this