Demo: Summary organized in collapsible sections

The demo on this page showcases how you can use page fields in your Gravity Form to organize the side summary into collapsible sections. Each section corresponds to a page in the form and will automatically expand when that page is active, helping users stay focused and navigate easily.
Optional “Edit” buttons can be shown for each section, allowing users to jump directly back to any step in the form to make quick changes without having to click previous.

Additionally, this demo demonstrates that the side summary can be hidden on specific pages—here, it’s hidden on the final page. Instead, a Live Summary field is used on the last step to provide a clean, full overview before submission.

Feature Overview / Key Highlights

  • Total Calculation: Display the total cost of all selected products at the bottom of the summary for clear pricing information.
  • Organize Summary with Page Fields: Use page fields to group form fields into collapsible sections for better organization.
  • Automatic Page Expansion: The current form page will automatically expand in the summary for easier navigation. The user can manually open/close other pages.
  • Customizable Section Titles: Summary section titles will default to the page titles but can be customized if needed.
  • Convenient Editing: An edit button will appear next to the title of non-active pages, allowing users to easily revisit previous steps.
  • Sticky Summary: The summary will remain fixed (sticky) alongside the form while scrolling for quick reference.
  • Conditional Visibility: Hide the side summary on the final page (or any designated page).
  • Preview before submission: Use the Live Summary Field on the last page to provide users with a clean form preview before submission.
  • Mobile Optimization: On mobile devices, the summary will automatically move above the submit buttons for improved accessibility.

Try the demo

Instructions

The form below has been pre-populated for your convenience. You will see that the summary has been divided into collapsible sections according to the page fields.

Use the edit buttons visible in the sections to quickly jump to another step of the form.

Navigate to the last page of the form. The side summary will be hidden and instead the summary is displayed through the live summary field.

Step 1 of 4 – Contact Details

Contact Details

Name
Summary

Backend Settings

Take a look behind the scenes. Below are screenshots of the admin settings panel so you can see exactly how this add-on integrates into Gravity Forms.

Related Resources