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.
[The video has since been removed, unfortunately. Sorry.]
* * *
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.