Streaming live at 10am (PST)

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:

1 Like