Skip to content
GPLWP Guides

How to add collapsible sections to Gravity Forms

Forms Time About 20–30 minutes 6 steps Updated 2 Oct 2026

FORMS
The short answer

Gravity Forms can organise long forms with Section fields and conditional logic, but it does not provide native click-to-collapse accordions. For real collapsible sections, use an add-on; the manual route requires custom front-end code and ongoing maintenance.

The route
  1. 01Plan the section layout
  2. 02Add section fields
  3. 03Use native conditional logic
  4. 04Understand the manual limitation
  5. 05Add a collapsible-sections add-on
  6. 06Test every form path

What you need

  • A Gravity Forms form
  • WordPress admin access
  • A backup or staging copy for code changes
  • The form ID and section layout you want to use

Plan the section layout

List the groups of fields that should sit under each expandable heading, such as Personal details, Address, Preferences, and Payment. Keep each group focused so users can understand what will appear when they open it.

Decide whether several sections may stay open at once. That choice affects the add-on settings and the front-end behaviour you need to test.

Add section fields

Open the form in Forms and add a Section field before each group of related fields. Give every section a clear label, then place the relevant fields beneath it until the next Section or Page field.

A Section field groups the fields that follow it. This is also the native way to apply one conditional-logic rule to a complete group instead of repeating the rule on every field.

Use native conditional logic

If you only need sections to appear or disappear based on an answer, select a Section field, open its conditional-logic settings, enable the feature, and create a show or hide rule. For example, show the Company details section only when the visitor selects Business.

This is the manual route that Gravity Forms supports without an accordion add-on. Fields after a Section inherit that section’s conditional logic until another Section or Page field appears, so add a new boundary when the rule should stop.

Understand the manual limitation

Native Section fields do not give visitors a click-to-expand and click-to-collapse accordion interface. You can create the visual effect with custom HTML, CSS, and JavaScript, but the code must stay aligned with Gravity Forms markup and validation behaviour.

That approach can break after a theme, Gravity Forms, or front-end script change, and it needs accessibility work such as keyboard controls, focus handling, and an accurate expanded or collapsed state. Use it only if you are comfortable maintaining front-end code.

Add a collapsible-sections add-on

For the fast route, install and activate a Gravity Forms collapsible-sections add-on such as Jetsloth. Edit the form, open each Section field, and use the add-on’s section settings to mark where an accordion group starts and ends. Leave ordinary sections unchanged where you do not want collapsing.

Accordion add-ons work by extending existing Section fields rather than rebuilding the form, allowing you to group fields into expandable panels. The available settings commonly include section labels, group boundaries, and whether a section behaves as a normal or collapsible section.

Test every form path

Open the published form in a private browser window and check that each heading opens and closes, required fields remain usable, and the submit button stays reachable. Test with a mouse, keyboard, and mobile screen width.

If you use conditional logic, test every answer combination. A frequent mistake is adding a new field below a conditional Section without adding another Section or Page boundary, which can make the new field inherit the wrong visibility rule.

The fast route

Let Jetsloth do it

Adds accordion-style sections and conditional visibility to lengthy Gravity Forms without custom code.

Get Jetsloth

Sources

  1. docs.gravityforms.com /enable-conditional-logic/?utm_source=openai
  2. gravityforms.com /add-ons/gravity-forms-collapsible-sections/?utm_source=open…
  3. community.gravityforms.com /t/all-my-new-fields-are-hidden/16570?utm_source=openai

Questions

Can Gravity Forms create collapsible sections without a plugin?
No, Gravity Forms does not natively provide visitor-facing accordion sections. Its built-in Section field groups fields and supports conditional logic, but click-to-collapse behaviour requires custom HTML, CSS, and JavaScript or an add-on. The custom-code route is possible, but you must maintain the interaction and accessibility code when your theme or Gravity Forms changes.
What is the difference between conditional sections and collapsible sections?
Conditional sections appear or disappear because of an answer, while collapsible sections remain available and let the visitor open or close them. Gravity Forms supports conditional logic on Section fields, so it can hide irrelevant groups natively. It does not provide the same native accordion interface for manually expanding and collapsing visible groups.
How do I apply conditional logic to a whole Gravity Forms section?
Add a Section field before the related fields, open that Section’s settings, enable conditional logic, and define the answer that should show or hide it. The rule affects the fields beneath the Section until the next Section or Page field. Add another boundary when later fields should not inherit the same rule.
Why are fields hidden after I add a conditional Section?
Fields may be hidden because they are still inside the conditional group created by the previous Section field. Gravity Forms applies that Section’s visibility rule to following fields until it reaches another Section or Page field. Insert the correct boundary, then check the form preview and the published form again.
What is the quickest way to add accordion-style sections?
The quickest way is to install a Gravity Forms collapsible-sections add-on, then configure the existing Section fields as accordion starts, ends, or normal sections. This avoids maintaining custom JavaScript and CSS. Jetsloth is one option designed for accordion-style sections and conditional visibility in lengthy Gravity Forms.