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.
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
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 
in the lower left on this page to add a note for our product team:
https://www.gravityforms.com/gravity-forms-roadmap/
Thank you.
We have a solution for this too over at Gravity Wiz. Itâs called Page Transitions.
Weâre releasing the 1.0 this month but itâs already a super solid, well supported option for folks looking to add a little spice to their formâs UX.
PS â Weâve got a few free snippets to customize it further too!
2 Likes