Gravity Wiz Gravity Wiz

Gravity Forms Page Transitions

Bring your forms to life with animated transitions between form pages and automatic page progression.

What does it do?

Animate your forms with smooth, buttery transitions as the user progresses from page to page. Make the experience even sleeker by automatically progressing to the next page when the last field on the current page is completed. Your forms will feel better, convert better, and delight your users.

Features

  • Animated multi page transitions.
    Create a sleek, fluid form navigation experience for your users. Slide and fade transitions supported out-of-the-box.
  • Soft validation.
    Avoid the tedium of “submitting” each page before progressing to the next. Required fields are validated on the frontend to avoid obvious mistakes. Full validation and submission is processed when the last page is submitted.
  • Auto-progression.
    Complete the last field on each page to automatically progress to the next page.
  • Animated progress bar & page steps.
    Whichever progress indicator you’re using, we’ve got you covered. Both styles are sleekly animated to indicate the current form’s progress.
  • Hide Next/Previous buttons.
    Easily hide the next and/or previous button to require users to progress through the form by completing the form fields (via Auto-progression).
  • Seamless, easy-to-use UI.
    Integrates directly with the Gravity Forms page settings. Activate any feature with a single click.
  • Automatic updates.
    Get updates and the latest features right in your dashboard.
  • Legendary support.
    We’re here to help! And we mean it.

Get Gravity Perks

This plugin is part of Gravity Perks, a suite of 47+ essential Gravity Forms addons with support you can count on.

Pricing
Learn more

Have a question?

We’re here to help, just send us a message.

Ask the Wizards
Gravity Forms Certified Developer
  • Version 1.0.32
  • Updated October 9, 2024
  • Released July 20, 2022
View Changelog

All Connections

All Perks

Documentation

  1. How do I enable this functionality?
  2. Feature Details
    1. Enable Page Transitions
      1. Transition Style
    2. Enable Soft Validation
      1. Supported Fields
    3. Enable Auto-progression
      1. Hide Next/Previous Button
      2. Supported Fields
  3. Known Limitations
    1. General Limitations
    2. Soft Validation Limitations
    3. Disable Auto-Progression On Specific Pages
  4. Hooks
  5. Related Resources

How do I enable this functionality?

This plugin requires Gravity Forms 2.5 or greater. The following instructions assume you have Gravity Perks and GP Page Transitions installed and activated.

Add a Page field to your form.
Click on the “Start Paging” field to open the pagination settings.
Navigate to the Perks tab in the pagination settings and configure the available features as desired. Full instructions for each setting below.

Feature Details

Enable Page Transitions

Enable animated transitions when navigating from page to page.

Page Transitions Auto-enables AJAX
All Page-Transition-enabled forms will automatically be loaded in AJAX mode. This is a core requirement of the page transition functionality.

Transition Style

There are two transition styles supported out-of-the-box: Slide and Fade.

  • Slide — Pages transition horizontally. “Next” pages slide in from the right. “Previous” pages slide in from the left.
  • Fade — Pages transition by fading in and out. Current page fade outs and the next page fades in.

For advanced users, alternate transition styles can be specified via the gppt_script_args filter. Be aware, using a non-default transition style may require custom modifications to other GP Page Transition functionality.

Enable Soft Validation

Soft Validation is an awesome feature that creates the smoothest page transition experience. Rather than submitting each page before progressing to the next, Soft Validation will make sure all required fields are filled out and then transition to the next page without submitting the current page. The result is a delightfully fluid transition with no awkward processing delays.

Soft Validation is enabled by default when page transitions are enabled. We recommend leaving Soft Validation enabled for an optimal form navigation experience.

With that said, it’s important to note that Soft Validation works best with simple forms like basic questionaries, quizzes, or surveys. Complex forms requiring heavy validation and conditional logic may not be suitable for this feature.

Supported Fields

Soft Validation supports all Gravity Forms field types. Please note that soft validation only validates required fields to ensure that they are not empty. This will catch a large majority of validation issue. It does not check that the value entered is correctly formatted (i.e. a valid email is entered into an Email field).

A full validation of all submitted data is processed when the last page is submitted. The user would then be redirected to the first page that contains errors.

Enable Auto-progression

Enable the last field on each page to automatically progress the form to the next page. This feature works best on simple, one-field-per-page forms; however, it is supported for any multi-page form.

Drop Downs & Auto-progression
When using Drop Down fields in combination with Auto-progression, you’ll want to make sure a placeholder is set so that the user is required to interact with the field.

Hide Next/Previous Button

Hiding the Next Button will require that the user interact with the form fields to automatically progress through the form. This feature works best on simple forms.

Hiding the Previous Button is a handy feature if you do not want the user to be able to navigate to previously submitted pages. Please note, if a validation error is generated on final submission, the user will be directed back to that page regardless of this setting.

Supported Fields

Auto-progression is supported by the following field types. Please note that some field types only support auto-progression if certain conditions are met.

  • Single Line Text
    with “Input Mask” enabled
  • Radio Buttons
  • Drop Downs
  • Date
    Date Picker, Date Drop Down
  • File Upload
    single file uploads only
  • Phone
    US format only
  • Custom Field
    Single Line Text, Drop Down, Radio Buttons, Date, Phone, File Upload
  • Product
    Drop Down, Radio Buttons
  • Quantity
    Drop Down
  • Shipping
    Drop Down, Radio Buttons
  • Survey Field
    Likert, Rating, Drop Down, Radio Buttons
  • Quiz Field
    Radio Buttons, Drop Down
  • Poll Field
    Radio Buttons, Drop Down

Known Limitations

General Limitations

  • Page Transitions does not support Image-type Next and Previous buttons.
  • Page Transitions is not supported on child forms created with GP Nested Forms.

Soft Validation Limitations

Soft Validation disables individual page submissions to create the most seamless user experience. As such, it does not work with features that require a page submission.

Here is a list of features known to not work with Soft Validation enabled.

  • Preview Submission
  • Credit Card fields
    • Note: Some payment methods such as Stripe’s Payment Forms can capture payment without using a Credit Card field. Soft Validation should still work since a Credit Card field is not required.
  • Phone number validation via GP Advanced Phone Field.

If your form requires one of these features, simply disable Soft Validation and your form will continue to benefit from tasty page transitions. There will simply be a small delay as the current page is submitted via AJAX before transitioning to the next page.

Disable Auto-Progression On Specific Pages

To disable auto-progression on specific pages, go to the Appearance tab in any Page field and add gppt-disable-auto-progress to the Custom CSS Class setting.

If you are using the Hide Next Button feature, the user won’t be able to progress that page. To fix that:

  1. Uncheck that setting under the Perks tab.

  2. Use our Code Chest plugin to add the following CSS to your form:

    .gform_page:not(.gppt-disable-auto-progress) .gform_next_button {display: none;}

This will keep the Next button active for the pages that need it, and hide it for the pages that auto-progress.

If you’d like to request support for one of these features, we’d love to hear from you.

Hooks

Gravity Forms has hundreds of hooks. Check out our Gravity Forms Hook Reference for the most thorough guide to Gravity Forms’ many actions and filters.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.