Building a Multi-Page Form in WordPress with Gravity Forms

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ OUR DISCLAIMER FOR MORE INFO.

I originally wrote this article in 2011, and until Gravity Forms released the version of their plugin that provided support for building multi-page forms, it wasn’t very easy to accomplish in WordPress. Today, ten years later, this isn’t such an exciting feature, it is common place and every form building plugin supports multi-page forms.

I copied this quote from the original blog post announcing the release:

One of the most widely requested features is finally here, multi-page form capabilities. Using the new Page Break field you now have the ability split longer forms into multiple pages or steps. We have also integrated a visual paging status bar that can be used to show a progress bar or the steps involved in completing the form.
Gravity Forms Blog

However, building multi-page forms in Gravity Forms is still really cool and often used, so I thought I should update this article and make it a how-to tutorial, for using Gravity Forms to build multi-page forms.

Building a Multi-Page Form

Implementing the multi-page feature in Gravity Forms only requires the use of one field! You can easily convert an existing form into a multi-page form, or create a new one.

Within the Standard Field section of the form builder, there is a “Page” field, simply add that field to any form and rearrange your fields, as desired, within the different page sections to build your multi-page form.

The Form

I decided to create an Event Registration form for this demo.

Page One: Attendee Information

This page uses five fields:

  1. Name Field
  2. Email Field
  3. Phone Field
  4. Twitter Handle = Single Line Text Field
  5. Shirt Size = Drop Down Field

Page Two: Attendee Preference

This page uses three fields:

  1. How will you attend? = Drop Down Field
  2. Will you be attending alone? = Radio Field
  3. Who will be attending with you? = List Field

Field three, uses conditional logic and is only visible if field two, Will you be attending alone?, is”No”.

Page Three: Ticket Options

This page has two sections, which are controlled by conditional logic based on the option made on page two, “How will you attend?”.

This section uses eight fields:

  1. Live Experience = Section Field
  2. Live Event attendance = Hidden Product Field
  3. Level One = Product Option (checkbox) Field
  4. Level Two = Product Option (checkbox) Field
  5. Level Three = Product Option (checkbox) Field
  6. (3)How many tickets do you need? = Product Quantity Field

This section uses six fields:

  1. Livestream = Section Field
  2. Livestream $0.00 = Hidden Product Field
  3. Level One = Product Option (checkbox) Field
  4. Level Two = Product Option (checkbox) Field
  5. (2) How many tickets do you need? = Product Quantity Field

In both sections, the entire section is displayed based on conditional logic set in the Section field. Additionally, the Quantity Product Fields use conditional logic to display only when the Product Option field is selected.

Page Four: Payment Completion

This section uses three fields:

  1. Your Total Investment = Product Total Field
  2. Credit Card = Stripe Card Field
  3. By clicking Complete Order … = Consent Field

The End Result

It’s not your speakers, there is no audio in this video ;-).

Next Steps

It’s time to build your form! If you want to start with a template, you can download a multi-page template from the Gravity Forms template library for free. The Event Registration, eCommerce, and Gift Certificate templates are multi-page.

You should also read an official Gravity Forms blog post about multi-page forms here: How to Create a Multi-Page Form.

Get the latest news, tips, and how-tos all delivered to you!

Your information is used only for email communications by GravityRanger. We do send the occasional product promotion email.

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


>