Automatically open collapsible sections via URL parameter
Looking to create a more dynamic and personalized experience for users filling out your Gravity Forms? With JetSloth’s Collapsible Sections add-on, you can now automatically open specific sections of your form on page load — all via a simple URL parameter.
What you’ll need
To get started with automatically opening collapsible sections in your Gravity Forms, you’ll need a few essentials. First, make sure you have Gravity Forms installed and active on your WordPress site. Next, you’ll need the Collapsible Sections add-on by JetSloth, which allows you to group fields into toggleable sections. While not required, we recommend using Code Chest by Gravity Wiz or another method to safely inject custom JavaScript into your site. Lastly, you’ll use a simple JavaScript snippet provided below that enables the functionality via a cs_open URL parameter – making dynamic form interaction a breeze.
| Gravity Forms |
| A copy of Collapsible Section |
| Code Chest by Gravity Wiz to add the Javascript or CSS (optional) |
| Supplied Custom Javascript below |
Open sections via URL
You can automatically open any collapsible section by appending a cs_open parameter to your form page URL. Use a comma-separated list of section field IDs that you want open by default. For example:?cs_open=1,5,10
This is perfect for linking directly to specific sections in a form – ideal for multi-purpose forms, support workflows, or custom user journeys. Just copy and paste the following JavaScript to your site (ideally using Code Chest or your theme’s footer):
gform.addAction('gf_collapsible_sections_setup', function(form_id, current_page, formDomId){
const rgexp = new RegExp('cs_open=' + '(.+?)(&|$)');
const sectionIds = decodeURIComponent( (rgexp.exec(window.location.search)||[,""])[1] ).split(',');
jQuery.each(sectionIds, function(i, id){
const $section = jQuery('#field_' + formDomId + '_' + id);
if ( $section.length === 0 ) {
return;
}
$section.addClass(collapsibleSections.cssClasses.open);
$section.attr('aria-pressed', 'true').attr('aria-expanded', 'true');
$section.data('collapsible-closed', false);
$section.next('.collapsible-sections-collapsible-body').show();
});
});Automatically open sections that contain fields with values on load
Don’t want to open sections via URL? The below snippet you can add is to auto-open any section containing a field with a pre-filled value, making it even easier to guide users to the relevant part of the form. The JavaScript below will open the first section that contains any field value.
This code snippet helps streamline complex forms and improves the user journey with smart, dynamic interactions.
gform.addAction('gf_collapsible_sections_setup', function(form_id, current_page, formDomId){
var sectionIds = [];
jQuery('#gform_wrapper_' + formDomId + ' .gfield:not(.gfield--type-html):not(.gfield--type-hidden):not(.gfield--type-section)').each(function(i, el){
var $field = jQuery(el);
var $section = $field.closest('.collapsible-sections-collapsible-body');
if ( $section.length === 0 || sectionIds.indexOf( $section.attr('aria-labelledby') ) !== -1 ) {
return;
}
var sectionId = $section.attr('aria-labelledby');
var addSection = false;
if ( ($field.hasClass('.gfield--input-type-checkbox') || $field.hasClass('.gfield--input-type-radio')) && $field.find('input:checked').length > 0 ) {
sectionIds.push(sectionId);
}
else if ( $field.hasClass('.gfield--input-type-select') && $field.find('select').val() ) {
sectionIds.push(sectionId);
}
else if ( $field.find('input').length > 0 && $field.find('input').val() ) {
sectionIds.push(sectionId);
}
else if ( $field.find('textarea').length > 0 && $field.find('textarea').val() ) {
sectionIds.push(sectionId);
}
});
jQuery.each(sectionIds, function(i, id){
var $section = jQuery('#' + id);
$section.addClass(collapsibleSections.cssClasses.open);
$section.attr('aria-pressed', 'true').attr('aria-expanded', 'true');
$section.data('collapsible-closed', false);
$section.next('.collapsible-sections-collapsible-body').show();
});
});
Show Us What You Build!
We’d love to see how you’re using the cs_open feature to create smarter, more dynamic forms. Whether it’s guiding users through complex workflows or improving conversion with personalized form links, tag us or send us your example – we’re always keen to see JetSloth add-ons in action!
Group your fields.
Make your long forms easier to navigate by grouping them into collapsible sections and increase your form conversion. Easily group your Gravity Forms fields into accordion-style sections.
