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.
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
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.
