Black Friday Sale Now on! Learn More
Skip to content

Display your form with tabs using Collapsible Sections

So we had a customer write to us this week asking for us to help them tweak the work they have already done to make their Collapsible Sections into Tab sections. Display your form in tabs with Collapsible Sections below.

Display your form with tabs using Collapsible Sections

Demo code & examples

We’ll use standard Gravity Forms fields, along with our Gravity Forms Collapsible Sections addon, and pair it with some custom CSS  to get your Collapsible Sections displayed in tab formats. Display your form in tabs with Collapsible Sections.

Add the CSS

Copy the below CSS, and paste it into your Gravity Forms Collapsible Sections form settings > custom CSS screen.

Just a heads up. The below guides and examples are intended for users with a little bit of CSS knowledge. You don’t have to be an expert, but the more confident you are with these, the better results you’ll get.

:root {
  --feature-color: #0275ff;
}
@media only screen and (min-width: 1024px){
    /* /////////////////// Tabs setup /////////////////// */
    .collapsible-tabs-form .gform_fields {
        position: relative;
    }
    .gform_wrapper .gsection.collapsible-sections-field, .collapsible-sections-field {
        cursor: pointer;
        padding: 10px;
        margin: 0;
        border: none;
        border-radius: 5px;
        width: calc(33% - 10px);
        position: absolute!important;
        top:0;
        background-color:white;
        border:none!important;
        transition:all 0.3s ease-in-out;
        position: absolute;
    }
    .collapsible-tabs-form.form-has-collapsible-sections .collapsible-sections-collapsible-body {
        border-radius: 5px;
        background-color: #fff;
        position: relative;
        z-index: 2;
        margin-top: 100px;
        padding: 50px!important;
        border: none!important;
    }
    
    /* /////////////////// Tabs /////////////////// */
    .gform_wrapper .gsection.collapsible-sections-field.collapsible-sections-open {
        background-color: var(--feature-color)!important;
    }
    .gform_wrapper .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title {
        color:white;
    }
    .collapsible-sections-field .gsection_title:after {
        display:none;
    }
    .gsection_title {
            font-size: 16px;
            padding: 9px;
    }
    .gfield.collapsible-sections-field:nth-child(1) {
        left: 0;
    }
    .gfield.collapsible-sections-field:nth-child(5) {
       right: 0;
    }
    .gfield.collapsible-sections-field:nth-child(3) {
        left: 50%;
        transform:translateX(-50%);
    }

    /* Position each tab across the top */
    .collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(1) {
     left: 0;
    }
    .collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(3) {
     left: 50%;
     transform: translateX(-50%);
    }
    .collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(5) {
     right: 0;
    }

    .small-text {
        font-size: 12px;
        text-align: center;
        margin: 20px 0;
    }
    .gform_wrapper.gravity-theme .gfield input.medium, .gform_wrapper.gravity-theme .gfield select.medium {
        width: 100%;
        background: #f8f8f9;
        padding: 50px!important;
    }
}

Notes & things to consider

Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further.

These examples are currently not mobile-friendly. Yeh, we know we know, we’ll get to it as soon as possible and update the CSS example code above when we do.

Disclaimer
Due to the somewhat custom nature of this tutorial, we’re only able to offer very basic support to help you get these examples working. Evey WordPress install is unique for your needs and thus near impossible for us to help implement these examples into everyone’s site. Take these examples as inspiration to try it yourself and see if you learn anything along the way. We’ll help where we can but can’t promise the world. Thanks for understanding.

Gravity Forms Collapsible Sections

4,815+ happy customers

Gravity Forms Collapsible Sections

Long forms are notorious for bad conversions, Collapsible Sections will convert your forms into beautifully displayed, easy to use, conversion generators.