Disabled (Greyed Out) Form Submit Button


#1

Hi!

Is it possible to grey out/disable the submit button on a form until all fields have been entered?

All fields on my forms are required and have a Privacy Policy agreement tickbox (yay to being GDPR compliant!). Once all fields have been completed, the submit button would change colour (washed out grey to blue) and become usable.

Any ideas anyone?

Thanks,

Jack


#2

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.


#3

Hi @Nicholas

Thanks for your feedback :slight_smile:

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


#4

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


#5

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.


#6

This is amazing! Thank you SO much @Nicholas!

:heart_eyes: Can’t wait to try this!


#7

Very cool Nicholas! Thanks for sharing :slight_smile: