PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Multi Page form progress bar location

  1. First time using the multi-page forms, loving it so far. I've got two questions, though:

    1.) Location: can the bar be moved to the bottom of the form instead of the top?

    2.) Can the calculation begin at zero? On the first page, they haven't really "completed" anything, so it's misleading to some degree.

    Posted 7 years ago on Friday September 23, 2011 | Permalink
  2. The location of the progress bar and the starting calculation cannot currently be modified.

    Currently the calculation represents where they are in the process keeping in mind that the progress bar is not displayed on the final page, which is the confirmation/thank you page.

    So it really depends on how you are looking at it as far as it starting at 0% or at a percentage that represents the first page. If the progress bar is displayed on the confirmation/thank you page then it would make sense to start at 0% and then the confirmation page would be 100%, but currently it does not do so.

    We have discussed adding an option to the Multi-Page settings to allow the display of the progress bar on the confirmation page, which would adjust the percentages accordingly. We may add that in the 1.7 release.

    Posted 7 years ago on Friday September 23, 2011 | Permalink
  3. I gotcha on the progress calculation. I think it was the combination of being at the top AND being at 25% that was throwing me off.

    That being said, I used a combination of some jquery and the gfrom_page_loaded function to make it happen. Here's the code if it'll help anyone else

    jQuery(document).ready(function() {
    
    	function movin_the_bar_like_a_boss() {
    		jQuery('div.gf_progressbar_wrapper').each(function(i,e){
    		    fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
    		    jQuery(e).siblings('div.gform_body').after(fielddesc);
    		    jQuery(e).remove();
    		});
    	}
    
    	movin_the_bar_like_a_boss();
    
    	jQuery(document).bind('gform_page_loaded', function(){
    		movin_the_bar_like_a_boss();
    	});
    
    	});
    Posted 7 years ago on Friday September 23, 2011 | Permalink
  4. Thanks for the follow up Norcross. As I mentioned we will definitely look at improving this in the future.

    Posted 7 years ago on Friday September 23, 2011 | Permalink

This topic has been resolved and has been closed to new replies.