Creating Multi-Page Forms

Introduction

A form with quite a few fields can look daunting for someone filling out the form. Many times, the form can be simplified by spanning it across several pages. Because less content is displayed at a time, large forms will not only be more pleasant but also load faster on your site. In this article, we will show you how to create a multi-page form using Gravity Forms.

This animation illustrates how to create a multi-page form.

Setup

  1. This article assumes that you have a basic understanding in creating forms, and have already created a form with multiple fields. If you need more information, see our form creation article.
  2. Now that you have your form fields in place, you just need to separate the fields by page. In the form editor, open the Add Fields tab in the sidebar and find the Page field in the Standard Fields section. Drag it between two fields where you would like a page break to appear, or click it to add it to the end of the form.
Image showing Page field in the form editor
Page field
  1. You should see that 3 items have been added to the form editor. These items allow you to determine where pages begin and end. 2 of these items, Begin Paging and End Paging, simply define that this form is a multi-page form. These items cannot be moved and will always be located at the beginning and end of the form editor when editing a multi-page form.

    You should also see a Page Break field type displayed within the form editor. This item separates the individual pages in a multi-page form. The items above it will be on the first page, and items after it will be on the second page.

Image showing multi page form in the form editor
Multi Page form
  1. If you want to add additional pages to a multi-page form, add another Page field and position it where you would like the previous page to end and the next page to begin. You can add as many page breaks as you want.

Options

To modify the behavior of multi-page forms, options are available within the individual items added using the Page field. For more information on how you can modify settings specific to multi-page forms, take a look at the Page Break field type article.

Linking to a Specific Page

When users move past the first page of a multi-page form, the current page number is added to the URL as gf_page_{form_id}. The URL updates as they move through the form, and the browser Back and Forward buttons move between form pages. The parameter is not shown on the first page.

Note: When the Validation Summary is enabled, each error links to the page where the field appears.

To link directly to a page, add the parameter to the URL of the page where the form is embedded. For example, to open page 3 of form 10:

https://example.com/contact/?gf_page_10=3
  • If the linked page is hidden by conditional logic, the form opens on the first page.
  • If the page number exceeds the number of pages in the form, the form opens on the last page.
  • Save and Continue links always reopen the page the user was on when they saved, regardless of gf_page_{form_id}.
  • The parameter is removed from the URL after the form is submitted and the confirmation message is displayed.

Resources

To stop the page number from being added to the URL, use the gform_disable_page_query_arg filter. Do note that when it is turned off, links that include gf_page_{form_id} open the form on the first page, and Validation Summary links no longer open the page with the error.