Multi Page Transition

We have a multi-page form using Ajax. How could you add a transition between pages, such as fading in the next set of fields?

thanks

There is currently no provision in Gravity Forms to do that. It is on our list of requested features. I will leave this topic open in case someone has a solution for you. Thank you.

1 Like

I had a similar need and ended up creating the multi-page animation with a combination of jQuery and animate.css (https://github.com/daneden/animate.css)

Example jQuery file -

gf_1_active_page = 1;

$(document).bind(‘gform_page_loaded’, function(event, form_id, current_page) {

        if(form_id == 1) { 

            if(gf_1_active_page != current_page) { 

                setTimeout(function() {
                    $('#gform_wrapper_1 .gform_page').removeClass('active');
                    $('#gform_wrapper_1 #gform_page_1_'+current_page).addClass('animated fadeInUp active').delay(1000).addClass('active');
                    gf_1_active_page = current_page;
                }, 100);

            }

        }
        
    });

The reason for the “gf_1_active_page” check is that “gform_page_loaded” also fires on form errors and you do not want the form page to animated when that happens. The delay gives the animation time to complete before applying the active class.

Example CSS:

#gform_wrapper_1 .gform_page {
transition: all 0.3s ease-in-out;
opacity: 0;
}

#gform_wrapper_1 .gform_page.active {
opacity: 1;
}

This may not be an elegant solution but it works. If anyone can improve on it I would love to see your update.

1 Like

This was super helpful, thanks @vegaswebsitedesigns.

I made some edits to keep the code working with a form by any ID dynamically as well as a fix for a bug given recent GF updates that was hiding page contents where there was a field error - you’ll see a new else statement where it reapplies the ‘active’ class.

Here it is:

<script>
var gf_active_page = 0;
jQuery('.gform_page').addClass('active');

function setPage(current_page, form_id) {
	setTimeout(function() {
                    jQuery('.gform_wrapper .gform_page').removeClass('active');
                    jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('animated fadeInUp active').delay(1000).addClass('active');
                    gf_active_page = current_page;
                }, 100);
}

jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page) {

            if(gf_active_page != current_page) { 
							setPage(current_page, form_id);
            } else {
              jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('active');
        }
    
    });
</script>
<style>
.gform_wrapper .gform_page {
transition: all 0.3s ease-in-out;
opacity: 0;
}

.gform_wrapper .gform_page.active {
opacity: 1;
}
</style>
1 Like

hey Scott
I recommend you to take a look at this link. pretty helpful

https://wordpress.org/plugins/beauty-gravity/

3 Likes

Hi - I implemented this code, but the first page of my form was blank. The fields were there, just not visible. I could click the next button, as i knew where it was, the next page loaded with the transition.
any idea on why the first page of the form wasn’t visible?
Thanks,
Stuart

@user5d80a6cdb4625259 Yep, give this updated snippet a try.

<script>
var gf_active_page = 0;
jQuery('.gform_page').addClass('active');

function setPage(current_page, form_id) {
	setTimeout(function() {
                    jQuery('.gform_wrapper .gform_page').removeClass('active');
                    jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('animated fadeInUp active').delay(1000).addClass('active');
                    gf_active_page = current_page;
                }, 100);
}

jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page) {

            if(gf_active_page != current_page) { 
							setPage(current_page, form_id);
            } else {
              jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('active');
        }
    
    });
</script>
<style>
.gform_wrapper .gform_page {
    transition: all 0.3s ease-in-out;
    opacity: 0;
}

.gform_wrapper .gform_page.active {
    opacity: 1;
}
</style>

Hi - unfortunately that didn’t work. All pages now appear blank.
Does it matter that my form is configured such that form 1 redirects on submission to form 2 with a URL parse?

Edit - don’t worry, sorted it. Thanks very much for the additional code. It wasn’t working previously as my javascript wasn’t running in the footer. It is now, and it works beautifully.

Thanks,
Stuart

1 Like

Hey Chris, any update on this functionality in the current version of Gravity Forms?

Our agency is looking to do something similar to this for a client - https://dribbble.com/shots/5985974-AVST-Contacts-Form-Animation

Hi Vanessa. There have not been any updates with this functionality. I recommend submitting your idea and comments on our roadmap: https://www.gravityforms.com/gravity-forms-roadmap/

That way, we can keep all the information in the same area. Thank you.

I’ve tried the beauty gravity plugin, which does a good job but adds a lot of bloat. If you’re ok with that then it’s good value.

Alternately you could just use CSS animation on elements, like the .gform_page.
Here is a guide that you could use, replacing their classes with your own: How To Add Page Transitions with CSS and smoothState.js | CSS-Tricks

1 Like

Hii @chrishajer

I have not seen this feature in the roadmap, it will be nice if you can add this feature because no one like page refresh in 2021.

Hi Helen. Can you add that in your own words here please?

Click the blue :heavy_plus_sign: in the lower left on this page to add a note for our product team:

https://www.gravityforms.com/gravity-forms-roadmap/

Thank you.