Disabled (Greyed Out) Form Submit Button

Hi @Nicholas

Thanks for your feedback 🙂

All our fields are required, so it does throw an error if a user clicks submit. From a design perspective, we think having it greyed out/disabled would prompt people to complete the fields to enable the submit button.

Any ideas on the custom JavaScript?

Thanks

Hey @Jack_Walsh and @Jennifer_wp,

Here’s some code you can test. Warning: I’m not a developer. We just have an awesomely amazing developer that works with us. This is what we use to make this work:

Demo page: http://unbouncepages.com/disable-form-button/

Add this CSS to the stylesheets tab:

<style>
  #lp-pom-form-9 a.disabledButton{
    pointer-events: none;
    cursor: not-allowed;
    background: rgb(168, 229, 247);
    color: #b7b4b4;
  }
</style>

And add this to the JavaScripts tab:

<script>
  var formEl = "#lp-pom-form-9 form";
  var buttonToDisable = "#lp-pom-button-10";
  
$(document).ready(function() {
  validate();
  $(formEl + ' input').keyup(function(){
  	validate();
  });
  $(formEl + ' input').change(function(){
  	validate();
  });
  $(formEl + " select").change(function(){
  	validate();
  });
});

function validate() {
  var inputsWithValues = 0;
  
  // get all input fields except for type='submit'
  var inputs = $(formEl + " input");

  inputs.each(function(e) {
    // if it has a value, increment the counter
    if ($(this).val()) {
      inputsWithValues += 1;
    }
  });
  
  if (inputsWithValues == inputs.length && validateCheckbox() && validateSelects()) {
    $(buttonToDisable).removeClass("disabledButton");
  } else {
    $(buttonToDisable).addClass("disabledButton");
  }
}
  
  function validateCheckbox(){
    var checkboxChecked = false;
  	$(formEl + " [type='checkbox']").each(function(){
    	if($(this).is(":checked")){
        	checkboxChecked = true;
          	return true;
        }
    })
    return checkboxChecked;
  }
  
  function validateSelects(){
  	var selects = $(formEl + " select");
    var selectsWithValues = 0;
    selects.each(function(e) {
      // if it has a value, increment the counter
      if ($(this).val()) {
        selectsWithValues += 1;
      }
    });
    
    if(selectsWithValues == selects.length){
    	return true;
    }else{
    	return false;
    }
  }
</script>

You need to change the “#lp-pom-form-9 form” and “#lp-pom-button-10” to match your form and form button IDs of course.

Very cool Nicholas! Thanks for sharing 🙂