Josh Hall, a WordPress/Divi/Web Design Teacher, asks:

Fellow Gravity Forms users, does anyone know of a script or easy solution that’ll grey out the submit button until all required fields are filled in?

I came up with a nice clean solution that can be dropped into a Divi Code module, or anywhere convenient on the page where your form is being displayed, using jQuery.

<script type="text/javascript">
  // don't forget to add a style for:
  // `input[type="submit"].disabled, input[type="submit"].button-disabled, input[type="submit"]:disabled`
  jQuery(function ($) {
    $('form[id^="gform_"]').on('change', function (e) {
      var $reqd = $(this).find('.gfield_contains_required.gfield_visibility_visible').filter(function (i, c) {
        return []
          .concat($(c).find('input[type="text"], textarea').filter(function (i, fl) { return $(fl).val().length == 0; }).get())
          .concat($(c).find('input[type="checkbox"]').not(':checked').get())
          .length;
      });
      if ($reqd.length) {
        $(this).find('input[type="submit"]').addClass('disabled button-disabled').attr('disabled', 'disabled');
      } else {
        $(this).find('input[type="submit"]').removeClass('disabled button-disabled').removeAttr('disabled');
      }
    }).trigger('change');
  });
</script>

As it says in the snippet, you’ll need to apply your own custom CSS to style the form’s disabled submit button, but that’s it!

Josh was kind enough to create a screencast showing how the code and CSS work so people can see it in action.

* * *

If you’re looking for some quick help with a change you’re trying to make to your website, come and ask us!¬† We might choose your question to be the subject of our next blog post.