Complete Guide: How to Create a Multi-Step Gravity Form

  1. Gravity Forms Multi-Step Use Cases
  2. How to Create Gravity Forms Multi-Step Forms Using Multi-Page Navigation
  3. Bonus: Let Users Preview Submissions
  4. Create Gravity Forms Multi-Step Forms Today

Gravity Forms is the most popular form builder plugin for WordPress websites. You can use it to build all sorts of basic and complex forms. For complex or lengthy forms that have many fields, you might consider building multi-step forms.

Multi-step forms allows you to simplify your form by spanning it across multiple steps or pages. This way, it becomes much less overwhelming for people to fill out the form and you can rest assured that your forms will load much faster.

With Gravity Forms multi-step forms you get much more flexibility in terms of designing your form and how the form fields are presented to users.

For example, you can make use of the Gravity Forms’ Save and Continue feature to let users save their place and come back to the form later on without needing to start over again. Or, you can use the Gravity Forms Partial Entries add-on to collect data in real-time as users fill out the form. 

In this article, we’ll take a look at when you might need to create multi-step Gravity Forms. We’ll also show you how you can deliver a better user experience by enhancing multi-step navigation with GF Multi-Page Navigation.

Gravity Forms Multi-Step Use Cases

There are plenty of situations where you might need to create longer or more complex front-end forms. Instead of overwhelming users with dozens of fields, you can span them across multiple pages to make it easier to complete and submit the form.

For example, if you’re creating a detailed course application form, you might need to ask users for their name, contact information, courses they’ve completed in the past, educational background, current occupation, income details, billing details (such as PayPal or Stripe), and much more.

Or, if you want to create a form to register users for a technical business training program, you might need to ask them for their contact details, the membership plan they’re interested in, how they found out about the program, how many people they’d like to register, and other details about their business and industry.

Instead of creating one long web form, you can split up your detailed web form into multiple pages or steps.

How to Create Gravity Forms Multi-Step Forms Using Multi-Page Navigation

To get started, install GF Multi-Page Navigation on your WordPress website.

GF Multi-Page Navigation

Gravity Forms Multi-Page Navigation is the easiest way to make long, complex forms user-friendly.

Next, head over to Forms > Add New to create a new form using the form editor. You can add as many different types of form fields as you’d like (such as radio buttons, dropdowns, email address field type, etc.). Make sure that you have at least two pages.

You can create pages in your form by adding the Page field (under Standard Fields). This will add page breaks to your form. You can drag and drop the page breaks into place to create pages. Next, select the Start Paging field at the top of your form (i.e. on the first page) and check the Enable Page Navigation checkbox.

Enable page navigation setting

It also lets you select a Progress Indicator i.e. either progress bar, steps, or none. Both progress bar and steps are great for enhancing user experience. You can also use the dropdown to specify when you’d like the form navigation to be available using the Activation Type option.

For example, you can set it to User can navigate to any form page from the start which works well with the Gravity Forms Save and Continue feature. It remembers the last page the user accessed making it easy for them to pick up where they left off.

Similarly, both the User can navigate to any form page they have completed option and the User can navigate to any form page after reaching the last page option work great with GF Preview Submission – more on this in the next section.

Your Gravity Forms multi-step form might look something like this on the front-end once you add the shortcode to a page or post:

Gravity Forms multi-step

It should have buttons to click through to the next page and previous page. You can always add custom CSS styling to tweak the look and feel of the form on the front-end. For example, you can change the color of the Next page button.

Bonus: Let Users Preview Submissions

After the user fills out a long web form or answers several pages of questions, it’s useful to give them a quick overview of the information they’ve submitted. This gives them a chance to catch any mistakes they may have made and the confidence to hit the Submit button.

GF Preview Submission

Gravity Forms Preview Submission is perfect for letting users view their form submission before hitting Submit.

To enhance the user experience, you can use the GF Preview Submission perk to let users preview their form submission and quickly make corrections if necessary.

Here’s what you need to do:

Install the GF Preview Submission perk to your WordPress website. Add an HTML field (under the Standard Fields) to the last page of your web form. Next, select the HTML field to open the field settings.

Click the small icon next to the Content text area to reveal a list of merge tags. You can insert these merge tags into the Content field. Select the All Submitted Fields option to display all of the form fields the user has submitted in the submission preview. The HTML field also supports conditional logic.

Save your form to continue. It should now look something like this on the front-end:

Create Gravity Forms Multi-Step Forms Today

With Gravity Forms multi-step form, you can break up long forms into shorter, less daunting steps. It’s an effective way to reduce friction and form abandonment rates while improving conversion rates. Use GF Multi-Page Navigation to create multi-page forms and integrate it with GF Preview Submission to let users quickly confirm if the information they’ve entered is correct. This is the easiest way to make long web forms user-friendly.

Ready to create your own Gravity Forms multi-step forms to increase conversions? Get the GF Multi-Page Navigation perk today!

Leave a Comment

Your email address will not be published. Required fields are marked *