Hmm, this could probably be done with custom Javascript. But just curious, have you considered just marking your form fields as “required?” That way, the form cannot be submitted until they are filled out. Otherwise it will throw an error.

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

I don’t have any JavaScript, but I find this to be an interesting idea. I’m curious how well it works!

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.

This is amazing! Thank you SO much @Nicholas!

😍 Can’t wait to try this!

Very cool Nicholas! Thanks for sharing 🙂