Do you want to use accordions inside your Gravity Form to make it more compact and easier for you form visitors to get an overview of the form content or the ability to reveal or collapse parts of the form? With the Gravity Forms Collapsible Sections Add-on from JetSloth you can turn Sections in your form into accordions.
Turn a Gravity Forms Section into an accordion
When the Gravity Forms Collapsible Sections Add-on from JetSloth is activated, you get an extra option tab in the Section Field settings: Collapsible Sections. You can choose there:
- None (normal selection): This will keep the section the way you’re used to.
- Start collaspible section: This will mark the top of the accordion, the accordion starts here.
- End collapsible section: This will mark the end of the accordion.
End of accordion
You can add sections inside the accordion. When you start a new collapsible section, the previous one will automatically end. You can also add a section purely to end the current accordion, but choosing for End collapsible section and choose for Hide (only used to end previous collapsible section).
Available Settings for the accordions
In your Gravity Form Settings, you have extra options available:
- Behaviour: you can force to only have one collapsible section open at the same time. The accordion will then always have only one section opened.
- Open by default: You can select one or more of the collapsible sections (accordions) that should be opened when you load the form.
- Scrolling: enable automatically scrolling to the top of the opened sections.
- Form footer placement: by default the Gravity Form Footer (with the next / previous / submit buttons) will be shown at the bottom of the form. With this setting you can place the footer inside the last section (it will only be visible when the last accordion is opened).
Styling Gravity Forms accordion sections
JetSloth produced some wonderful tutorials about styling the accordion sections. You can easily add custom CSS to your collapsible sections in the Gravity Form Settings:
Examples custom styling
Our Premium add-ons for Gravity Forms
All Entries
All your new Gravity Forms entries in one central place. Stop navigating between multiple forms to find new entries. Get immediate oversight and full control with a powerful, unified dashboard.
List Number Format
With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.
Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.
n8n Connector
Connect Gravity Forms to n8n and automate your workflows with secure, flexible, and powerful webhooks. Go beyond simple notifications and build advanced, two-way automations.
Read tutorials about
Gravity Forms Discount Code Field: Apply Fixed or Percentage Discounts in a Form
Learn how to create a Gravity Forms discount code field that applies fixed or percentage discounts. This tutorial shows how to calculate subtotals, discount amounts, and final totals using tested form logic.
Gravity Forms Zoom Integration: Create Zoom Meetings From Booking Forms
Learn how to connect Gravity Forms to Zoom without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create Zoom meetings from booking form submissions and save the returned meeting details back to Gravity Forms.
Gravity Forms monday.com Integration: Create New Items From Form Submissions
Learn how to connect Gravity Forms to monday.com without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create new monday.com items from form submissions and save the returned monday.com item ID back to Gravity Forms.
Gravity Forms Pipedrive Integration: Send Form Contacts to Pipedrive Without Zapier
Learn how to connect Gravity Forms to Pipedrive without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to send form contacts, custom fields, and the returned Pipedrive Person ID directly from WordPress to Pipedrive CRM.
