How to add page transitions to Gravity Forms
Gravity Forms provides multi-page navigation but no built-in control for animated page changes. You can add a fade or slide with custom CSS and JavaScript, provided the form uses AJAX, or use an addon for a quicker setup.
- 01Create the form pages
- 02Enable AJAX rendering
- 03Add a transition class
- 04Listen for page changes
- 05Test validation and mobile layouts
- 06Use an addon for the fast route
What you need
- A Gravity Forms multi-page form
- Administrator or code-snippet access
- A staging site or recent backup
- Basic CSS and JavaScript editing knowledge
Create the form pages
In Forms, open the form and add a Page field wherever one page should end. Gravity Forms adds the paging markers automatically. Select the first paging marker to choose a progress bar, steps, or no progress indicator.
Keep related fields together and avoid making every page too short. Page breaks control the form structure; they do not animate the change by themselves.
Enable AJAX rendering
Edit the page or block containing the form and enable AJAX for the form embed. The JavaScript event used for page changes fires for multi-page forms when AJAX submission is enabled.
This matters because a normal page change can reload or rebuild the form before your transition code runs. If the event never fires, check the embed settings first rather than changing the animation code.
Add a transition class
Use the form's wrapper and page IDs to target only this form. Gravity Forms outputs wrappers such as #gform_wrapper_1 and page containers such as #gform_page_1_2, where the numbers represent the form and page IDs. Add CSS that starts each page transparent and applies an animation class when the newly loaded page appears.
A simple fade can use opacity: 0 on the page container and opacity: 1 on an active class. For a slide, combine opacity with transform: translateX(20px) and reset the transform on the active class. Scope the rules to the form ID so you do not animate other forms.
Listen for page changes
Add frontend JavaScript through your child theme, a code-snippets tool, or your theme's approved custom JavaScript area. Listen for the gform_page_loaded event, read event.detail.form_id and event.detail.current_page, then remove the active class from the old page and add it to the new page.
Track the previously active page or compare the page number before applying the class. The event can also fire when validation leaves the user on the same page, so animating every event may cause an unwanted flicker after an error.
Test validation and mobile layouts
Test Next, Previous, required-field errors, conditional page logic, confirmation, browser back navigation, and a slow connection. A common failure is hiding every page with CSS and then leaving the first page without its active class, which makes the form appear blank.
Also test with keyboard navigation and reduced-motion preferences. Keep the animation short, avoid moving the page so far that users lose their scroll position, and make sure the form remains usable if JavaScript is delayed or disabled.
Use an addon for the fast route
If you do not want to maintain CSS and event-handling code, use Gravity Perks Page Transitions Addon. It is designed for animated transitions between multi-page Gravity Forms pages and provides fade, slide, and zoom effects with settings for transition behaviour.
This is the practical choice when several forms need the same treatment, non-developers must manage the settings, or you want to avoid fixing custom code after a Gravity Forms, theme, or markup change. You still need to test AJAX, validation, conditional logic, and mobile behaviour on the live form.
Let Gravity Perks Page Transitions Addon do it
Adds fade, slide, and zoom effects between multi-page forms; choose it when form progression needs more visual polish.
Sources
- docs.gravityforms.com /page-break/?utm_source=openai
- docs.gravityforms.com /gform_page_loaded/?utm_source=openai
- docs.gravityforms.com /css-visual-guide/?utm_source=openai
Questions
- Does Gravity Forms have built-in page transition animations?
- No, Gravity Forms includes multi-page navigation and progress indicators but does not provide a general setting for animated page changes. Its Page field creates the pages and controls navigation, while custom CSS and JavaScript or an addon handle the visual transition. The manual approach is suitable for one simple fade, but it requires maintenance.
- Does a Gravity Forms page transition require AJAX?
- For the usual JavaScript approach, yes, enable AJAX on the form embed. The <code>gform_page_loaded</code> event is documented for multi-page forms with AJAX enabled, so your script can react when the next or previous page loads. Without AJAX, the form may reload before the animation code can run.
- Why does my Gravity Forms animation run again after a validation error?
- The page-loaded event can fire during form processing even when the visitor remains on the same page. Store the previous page number and only animate when the current page is different. Also avoid hiding the whole form during validation, or required-field errors may be difficult to see.
- Can I add a slide transition with CSS only?
- CSS can define the visual fade or slide, but CSS alone does not reliably know when Gravity Forms has loaded a different page. You need a class change triggered by JavaScript, normally from the page-loaded event. The CSS should be scoped to the form wrapper and should leave the initial page visible before the script runs.
- Should I use custom code or a page-transition addon?
- Use custom code when you need one straightforward fade or slide and can maintain a small CSS and JavaScript snippet. Use an addon when you need reusable settings, multiple effects, or a non-developer-friendly workflow. Whichever route you choose, test validation, conditional pages, AJAX, accessibility, and mobile layouts before publishing.