Disable submit button on page load

Hello,

is there a way to disable a submit button on page load within a webflow form ?
I tried everything, but nothing works in webflow but works in a simple codepen.
I reproduced the exact same code that works in codepen but webfow seems to override the disabled attribute. Do I need to “push” some setting to the webflow API so that it accept my disabled attribute ? :slight_smile:

code in the custom code embed in Webflow (not working)

<form action="something.php" method="post">
  <input type="text" name="name" placeholder="name">
  <input type="submit" value="Submit" disabled/>
</form>

exact same code in codepen (working as expected)

<form action="something.php" method="post">
  <input type="text" name="name" placeholder="name">
  <input type="submit" value="Submit" disabled/>
</form>

I also tried a very simple javscript code to disable the button on DOM loaded… it works on codepen once again but not in webflow.

// 🥑 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
  document.querySelector("input[type=submit]").disabled = true;
});

My question: how to disable a submit button with custom code in Webflow ?
Read-only link here (lookf for page called “recaptcha test 2” … if you have time :slight_smile:

Thanks !

I think I did it !

I found this article talking about pushing custom code that would affect Webflow component.
Here is the code using the asynchronous wrapper mentioned in the article:

// 🥑 Webflow asynchronous wrapper
var Webflow = Webflow || [];
Webflow.push(function () {
  var submitBtn = document.querySelector("input[type=submit]");
  submitBtn.disabled = true;
});

Hope that helps someone :slight_smile:

3 Likes

@anthonysalamin, thanks, this worked perfectly. is there a way to enable the button after required fields is selected out in the select-field dropdown list or size variant list field., i am trying to enable this for the webflow ecommerce “add to cart” button.

Thanks Anthony! Appreciate you coming back to the thread after you found an answer so others might benefit from it in the future!