- Gravity Forms Multi-Step Use Cases
- Bonus: Integrations
- Get Started with 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 (or the Advanced Save and Continue plugin) 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
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.
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:
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.
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
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:
Add Page Transitions to Improve Your Form’s Flow
Gravity Forms Page Transitions can be used to help bring your multi-step forms to life. This add-on creates fluid, animated transitions between form pages, and automatically progresses the user to the next page after the last field on the current page is completed. It’s a quick and easy addition to help make your longer forms feel better, convert better, and delight your users.
Automatically Save and Reload Progress on Longer Forms
When dealing with longer submissions and multi-page forms, it helps to know that your submission contents are being saved — just in case. Existing Gravity Forms Save and Continue functionality can save your submission, but this requires a link and emailing process. That’s why we built Gravity Forms Advanced Save and Continue — it automatically saves form progress and reloads it when you return, without the need for additional links, and whether you’re logged in or any website visitor. It also allows you to manage multiple drafts, display draft shortcodes, and customize return messages.
Get Started with Multi-Step Forms Today
With multi-step forms, 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. You can use GF Multi-Page Navigation to create multi-page forms and integrate this with GF Preview Submission to let users quickly confirm if the information they’ve entered is correct. GF Page Transitions can also help out here by improving the flow of your forms and overall user experience. It’s a great way to make long web forms user-friendly!
Ready to create your first multi-step forms?