Quantcast
Viewing all articles
Browse latest Browse all 196

Multi-page Form Navigation

Adds support for navigating between form pages by converting the page steps into page links or creating your own custom page links.

This snippet can add the multi-page form navigation functionality to any form with multiple pages. Only forms using the “Steps” progress indicator will have the page steps converted into page links. For forms using the “Progess Bar” or no progress indicator at all can still make use of this functionality by creating custom links using the custom page link formatting instructions below.

Currently, this functionality is setup so that the page links are not activated until the user reaches the final page of the form. Users can then navigate freely to any page using the page step links (displayed above the form).

After reaching the last page, navigating back to any form page will display a link: “Back to Last Page”. Clicking this link will (you guessed it!) take the user back to the last page.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
<?php
/**
* Multi-page Navigation
* http://gravitywiz.com/
*/
 
class GWMultipageNavigation {
 
private $script_displayed;
 
function __construct( $args = array() ) {
 
$form_ids = false;
if( isset( $args['form_id'] ) ) {
$form_ids = is_array( $args['form_id'] ) ? $args['form_id'] : array( $args['form_id'] );
}
 
if( !empty($form_ids) ) {
foreach( $form_ids as $form_id ) {
add_filter("gform_pre_render_{$form_id}", array( &$this, 'output_navigation_script' ), 10, 2 );
//add_filter('gform_register_init_scripts', array( &$this, 'register_script') );
}
} else {
add_filter('gform_pre_render', array( &$this, 'output_navigation_script' ), 10, 2 );
}
 
}
 
function output_navigation_script( $form, $is_ajax ) {
 
// only apply this to multi-page forms
if( count($form['pagination']['pages']) <= 1 )
return $form;
 
$this->register_script( $form );
 
if( $this->is_last_page( $form ) || $this->is_last_page_reached() ) {
$input = '<input id="gw_last_page_reached" name="gw_last_page_reached" value="1" type="hidden" />';
add_filter( "gform_form_tag_{$form['id']}", create_function('$a', 'return $a . '' . $input . '';' ) );
}
 
// only output the gwmpn object once regardless of how many forms are being displayed
// also do not output again on ajax submissions
if( $this->script_displayed || ( $is_ajax && rgpost('gform_submit') ))
return $form;
 
?>
 
<script type="text/javascript">
 
(function($){
 
window.gwmpnObj = function( args ) {
 
this.formId = args.formId;
this.formElem = jQuery('form#gform_' + this.formId);
this.currentPage = args.currentPage;
this.lastPage = args.lastPage;
this.labels = args.labels;
 
this.init = function() {
 
// if this form is ajax-enabled, we'll need to get the current page via JS
if( this.isAjax() )
this.currentPage = this.getCurrentPage();
 
if( !this.isLastPage() && !this.isLastPageReached() )
return;
 
var gwmpn = this;
var steps = $('form#gform_' + this.formId + ' .gf_step');
 
steps.each(function(){
 
var stepNumber = parseInt( $(this).find('span.gf_step_number').text() );
 
if( stepNumber != gwmpn.currentPage ) {
$(this).html( gwmpn.createPageLink( stepNumber, $(this).html() ) )
.addClass('gw-step-linked');
} else {
$(this).addClass('gw-step-current');
}
 
});
 
if( !this.isLastPage() )
this.addBackToLastPageButton();
 
$(document).on('click', '#gform_' + this.formId + ' a.gwmpn-page-link', function(event){
event.preventDefault();
 
var hrefArray = $(this).attr('href').split('#');
if( hrefArray.length >= 2 ) {
var pageNumber = hrefArray.pop();
gwmpn.postToPage( pageNumber );
}
 
});
 
}
 
this.createPageLink = function( stepNumber, HTML ) {
return '<a href="#' + stepNumber + '" class="gwmpn-page-link">' + HTML + '</a>';
}
 
this.postToPage = function(page) {
this.formElem.append('<input type="hidden" name="gw_page_change" value="1" />');
this.formElem.find('input[name="gform_target_page_number_' + this.formId + '"]').val(page);
this.formElem.submit();
}
 
this.addBackToLastPageButton = function() {
this.formElem.find('#gform_page_' + this.formId + '_' + this.currentPage + ' .gform_page_footer')
.append('<input type="button" onclick="gwmpn.postToPage(' + this.lastPage + ')" value="' + this.labels.lastPageButton + '" class="button gform_last_page_button">');
}
 
this.getCurrentPage = function() {
return this.formElem.find( 'input#gform_source_page_number_' + this.formId ).val();
}
 
this.isLastPage = function() {
return this.currentPage >= this.lastPage;
}
 
this.isLastPageReached = function() {
return this.formElem.find('input[name="gw_last_page_reached"]').val() == true;
}
 
this.isAjax = function() {
return this.formElem.attr('target') == 'gform_ajax_frame_' + this.formId;
}
 
this.init();
 
}
 
})(jQuery);
 
</script>
 
<?php
$this->script_displayed = true;
return $form;
}
 
function register_script( $form ) {
 
$page_number = GFFormDisplay::get_current_page($form['id']);
$last_page = count($form['pagination']['pages']);
 
$args = array(
'formId' => $form['id'],
'currentPage' => $page_number,
'lastPage' => $last_page,
'labels' => array(
'lastPageButton' => __('Back to Last Page')
)
);
 
$script = "window.gwmpn = new gwmpnObj(" . json_encode( $args ) . ");";
GFFormDisplay::add_init_script( $form['id'], 'gwmpn', GFFormDisplay::ON_PAGE_RENDER, $script );
 
}
 
function is_last_page( $form ) {
 
$page_number = GFFormDisplay::get_current_page($form['id']);
$last_page = count($form['pagination']['pages']);
 
return $page_number >= $last_page;
}
 
function is_last_page_reached() {
return rgpost('gw_last_page_reached');
}
 
}
 
$gw_multipage_navigation = new GWMultipageNavigation();
view raw gistfile1.php This Gist brought to you by GitHub.

How do I install this snippet?

Easy peasy. Just copy and paste the code above into your theme's functions.php file.

How do I use this functionality?

If you want to apply this functionality to all forms and you are already using the “Steps” progress indicator for your forms, installing the snippet is all you’ll need to do. If you’re interested in limiting this functionality to a few specific forms, need some help setting your form’s progress indicator, or want to learn how to create your own custom page links, read on!

Limiting to a Specific Form

Limit to a Single Form

4
$gw_multipage_navigation = new GWMultipageNavigation();
view raw gistfile1.php This Gist brought to you by GitHub.

Limit to Multiple Forms

10
$gw_multipage_navigation = new GWMultipageNavigation( array( 'form_id' => array(2, 5, 11) ) );
view raw gistfile1.php This Gist brought to you by GitHub.

Setting Progress Indicator

If you’d like your form’s page steps (which display above the form), you’ll need to set your paging progress indicator to “Steps”. To do so, find the “Start Paging” field and open its settings. Under the “Properties” tab, find the “Progress Indicator” setting and select the “Steps” option. If you’d like to specify a name for each step, you can do so here.

Image may be NSFW.
Clik here to view.
paging-progress-indicator
Paging Progress Indicator: Steps

Creating Custom Page Links

If you’d like to create your own custom page links, you can do so using the following link format:

<a href="#{pageNumber}" class="gwmpn-page-link">My Link Text</a>

Just update {pageNumber} to the page number you would like to link to and update My Link Text to whatever text (or other HTML) you would like to display for your link. Note: The link must be output somewhere within the opening and closing GF <form> tags.

Small Disclaimer

One not-so-awesome thing about this snippet is that we’re outputting a decent bit of Javascript to the page. Ideally, this Javascript would be included in a separate file. For the sake of users new to WordPress and/or web development, I chose to go the simpler, less efficient route for ease of installation.

If you’d like to move the JS portion to a separate file, please do! The entire gwmpnObj JS object can be moved to any JS file; just make sure you include it on any page you display a form configured to use it.

Closing Notes

Gravity Perks is almost ready to launch and this snippet will be available as a perk. What does that mean for you? Have a centralized location to manage all your Gravity Forms functionality and an awesome repository of useful Gravity Form enhancements. Sign-up to be notified when Gravity Perks is released or view the currently available perks in beta and help test!


Viewing all articles
Browse latest Browse all 196

Trending Articles