In this post we will learn how to persist fields across all pages of a multi-page Gravity Form. By adding special classes, we will allow our selected field(s) to be pinned to the form by either prepending or appending them to the other fields presented on each page.
I first created this snippet in order to use a single checkbox field for enabling/disabling a single PDF Preview field and making both of those available to the user at all times while completing a multi-page form. Here is a quick demonstration of a use-case in which user identification and an instructional note is displayed persistently throughout a registration form.
Pretty slick, right? Now, let’s get to the good stuff—making this work for you.
Step 1: Add the Script
When the user first loads the form or navigates to a page, this script checks for the fields we’ve indicated and then moves them to the active (visible) page as we navigate the form.
<?php // Prepends or appends fields (marked by class `prepend-to-pages` or `append-to-pages` respectively) to every page of a Gravity Form
add_action( 'gform_pre_render', function( $form ) {
add_action( 'wp_footer', function () { ?>
<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(event, form_id, current_page) {
jQuery(jQuery('.gfield.prepend-to-pages').get().reverse()).each(function() {
jQuery(this).prependTo(`#gform_page_${form_id}_${current_page} .gform_fields`);
});
jQuery(jQuery('.gfield.append-to-pages').get().reverse()).each(function() {
jQuery(this).appendTo(`#gform_page_${form_id}_${current_page} .gform_fields`);
});
} );
</script>
<?php } );
return $form;
} );Find this script and others at snippet.farm.
To enable this functionality for all forms, add this script globally alongside your Gravity Form install in whatever way you do (i.e. custom plugin, functions.php, etc.). If you want to employ it on a single form, you might use the handy and free Gravity Forms Custom Javascript plugin by Gravity Wiz.
Step 2: Indicate Field(s)
All we have left to do is indicate the field(s) we would like to show across pages of the form. To do this, we visit the Appearance tab in our field and add a Custom CSS Class of either prepend-to-pages or append-to-pages. The fields in which we’ve added these classes will now be added at the beginning or end of each page of our form (when viewed on the front end of the site).
Step 3: Marvel & Reap the Benefits
There it is. You are now equipped to persist fields across pages of a Gravity Form! Get to it!
I know I’ve only begun to uncover the use-cases for field persistence across pages of a Gravity Form. So, if you put this to use, I’d be happy to hear about it. Feel free to connect with me @uamv or @typewxyz.
