Skip to main content

Form Disable on Submit

Webflow's native forms don't guard against users clicking "Submit" multiple times while a submission is processing. On slower connections this causes duplicate entries. This snippet disables the submit button immediately on first click and optionally swaps its label to a loading state.

Page Settings script​

Add to Page Settings → Custom Code → Before </body> on any page with a form:

<script>
document.querySelectorAll('form').forEach(function (form) {
  form.addEventListener('submit', function () {
    var btn = form.querySelector('[type="submit"]');
    if (!btn) return;
    btn.disabled = true;
    if (btn.dataset.wait) btn.value = btn.dataset.wait;
  });
});
</script>

Setup​

StepAction
1Add the script to any page containing a form.
2Optionally, add a data-wait attribute to the submit button in the Webflow Designer (Custom Attributes panel) to set the loading label, e.g. data-wait="Sending…".
3If you have multiple forms on the page, the script handles all of them automatically.

Webflow's built-in data-wait​

Webflow native Form components actually support data-wait on the submit button natively — the Designer exposes a "Wait text" field in the Form settings panel. If you're using a standard Webflow Form component, check whether that field is already available before adding this script.

This snippet is useful when:

  • The built-in data-wait isn't working as expected, or
  • You've built a custom form structure outside of the native Form component, or
  • You want the button to stay disabled (not re-enable after submission).

Re-enabling on error​

If you want to re-enable the button when Webflow reports a form error (so the user can correct and resubmit):

<script>
document.querySelectorAll('form').forEach(function (form) {
  var btn = form.querySelector('[type="submit"]');
  var originalLabel = btn ? btn.value : '';

  form.addEventListener('submit', function () {
    if (!btn) return;
    btn.disabled = true;
    if (btn.dataset.wait) btn.value = btn.dataset.wait;
  });

  // Webflow fires this event on form error
  form.addEventListener('error', function () {
    if (!btn) return;
    btn.disabled = false;
    btn.value = originalLabel;
  });
});
</script>

Notes​

  • btn.value sets the text on <input type="submit"> elements. For <button type="submit"> elements, use btn.textContent instead.
  • Webflow's submit button is an <input type="submit"> by default.