Skip to content

Instantly share code, notes, and snippets.

@RadGH
Last active May 3, 2022 20:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RadGH/c17d4154ebf09c6d5c60424e124989ba to your computer and use it in GitHub Desktop.
Save RadGH/c17d4154ebf09c6d5c60424e124989ba to your computer and use it in GitHub Desktop.
Gravity Forms that use a progressbar for multiple pages will adjust as answers are filled in, rather than only when progressing to the next page.
<?php
/*
Plugin Name: A+A Gravity Forms Dynamic Progressbar
Description: Gravity Forms that use a progressbar for multiple pages will adjust as answers are filled in, rather than only when progressing to the next page.
Author: Radley Sustaire, Alchemy + Aim
*/
class AA_GF_Dynamic_Progressbar {
public function __construct() {
add_filter( 'gform_pre_render', array( $this, 'gform_pre_render' ) );
}
public function gform_pre_render( $form ) {
// Run once
remove_filter( 'gform_pre_render', array( $this, 'gform_pre_render' ) );
if ( !defined('DOING_AJAX') || !DOING_AJAX ) {
?>
<script type="text/javascript">
/** Make the progress bar amount update automatically */
function aa_auto_progressbar( form_id, $form, $bar ) {
var debugmode = false;
var current_progress = -1;
var $all_fields = $form.find('.gform_body .gfield');
// Update the progress bar to a percentage.
// amount = 0.4 will become 40%.
var set_progress = function( amount ) {
amount *= 100;
var percentage = Math.floor(amount) + "%";
$bar.find('.gf_progressbar_percentage').css('width', percentage );
$bar.find('span').html( percentage );
if ( debugmode ) console.log('set_progress: ', percentage);
};
// Calculate how many fields are remaining.
var calculate_progress = function() {
var filled = 0;
var total = 0;
$all_fields.each(function() {
var $val_inputs = jQuery(this).find('input[type="text"], input[type="email"], textarea, select');
var $check_inputs = jQuery(this).find('input[type="checkbox"], input[type="radio"]');
// Ignore text boxes for radio/checkbox fields
$val_inputs = $val_inputs.filter(function() { return jQuery(this).closest('.gfield_radio, .gfield_checkbox').length === 0; });
if ( $val_inputs.length > 0 || $check_inputs.length > 0 ) {
// A field can have multiple inputs, like 5 radio buttons. It's still only one field.
total += 1;
// if ANY of those inputs has a value, it should be considered filled.
if ( $val_inputs.filter(function() { return jQuery(this).val() !== ""; }).length > 0 ) {
filled += 1; // has value
if ( debugmode ) console.log('Filled Field:', this);
} else if ( $check_inputs.filter(function() { return jQuery(this).prop('checked'); }).length > 0 ) {
filled += 1; // is checked
if ( debugmode ) console.log('Checked Field:', this);
}else{
if ( debugmode ) console.log('Empty field: ', this );
}
}
});
// Get progress from number of filled fields versus total fields
var progress = filled / total;
// Update progress bar if amount changed
if ( current_progress !== progress ) {
set_progress( progress );
// Reset existing classes
$bar.attr('class', 'gf_progressbar');
// Interval of 50
if ( progress >= 0.5 )
$bar.addClass('over-half');
else
$bar.addClass('under-half');
// Interval of 10
if ( progress < 0.05 ) $bar.addClass('perc-0');
else if ( progress < 0.15 ) $bar.addClass('perc-10');
else if ( progress < 0.25 ) $bar.addClass('perc-20');
else if ( progress < 0.35 ) $bar.addClass('perc-30');
else if ( progress < 0.45 ) $bar.addClass('perc-40');
else if ( progress < 0.55 ) $bar.addClass('perc-50');
else if ( progress < 0.65 ) $bar.addClass('perc-60');
else if ( progress < 0.75 ) $bar.addClass('perc-70');
else if ( progress < 0.85 ) $bar.addClass('perc-80');
else if ( progress < 0.95 ) $bar.addClass('perc-90');
else $bar.addClass('perc-100');
}
if ( debugmode ) console.log('filled:', filled, '; total:', total, '; progress:', progress);
};
// Calculate every time a field changes
$form.on('change', ':input, textarea, select', calculate_progress);
// Also calculate immediately
calculate_progress();
}
jQuery(function() {
// Locate the gravity form, the wrapper uses the ID.
var $wrapper = jQuery('.gform_wrapper' );
if ( $wrapper.length > 0 ) $wrapper.each(function() {
var form_id = $wrapper.attr('id').replace('gform_wrapper_', '');
var $form = $wrapper.find( '#gform_' + form_id );
var $bar = $form.find('.gf_progressbar');
if ( $bar.length > 0 ) {
aa_auto_progressbar( form_id, $form, $bar );
}
});
});
</script>
<?php
}
return $form;
}
}
new AA_GF_Dynamic_Progressbar();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment