How to make your Gravity Forms convert better with Collapsible Sections for Gravity Forms & Image Choices
High-converting forms are like magical unicorns, once you’ve got one or figured out how to get one, you never want to let go.
Good converting forms can do anything like selling products, capturing emails, generating leads and growing businesses. Let’s have a look at how you can use Collapsible Sections for Gravity Forms and Image Choices to help increase the usability and conversion of your Gravity Forms.
Live Demo
Sign Up forms
Separate important information into groups to take your users on a sign-up process that feels quick and easy. Don’t make them think too hard and overload them with options or selections.
/* Sign up form CSS */
.gform_wrapper.gravity-theme .gsection {
border-bottom: unset;
padding: unset;
margin: unset;
}
.small-text {
text-align: center;
font-size: 12px;
line-height: 20px;
max-width: 70%;
margin: 20px auto;
display: block;
}
.customSelectInner {
background-size: 22px;
}
.CS_post_demo_1_wrapper h2.gsection_title {
color: #3D495A;
margin-bottom: 20px;
line-height: 1.3;
font-weight: 300;
font-style: normal;
font-size: 28px;
background:none!important;
margin:0px!important;
padding:0px!important;
}
.form-has-collapsible-sections_wrapper. gform_footer top_label {
display:none;
}
.CS_post_demo_1_wrapper .gform_fields {
width: 50%!important;
margin: 0 auto;
}
.CS_post_demo_1_wrapper .profile {
width: 50px;
height: 50px;
border-radius: 100%;
float: right;
display: inline-block;
position: relative;
margin-top: -56px;
margin-right: -13px;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field {
background-color: #fff;
border-color: #ededed !important;
padding: 20px 25px !important;
margin-top: 14px !important;
border-radius: 7px;
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
position: relative;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open {
border-color: #0275ff;
background-color: #0275ff;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color:#fff!important;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title {
font-size: 18px;
background: transparent;
padding: 0;
border-radius: 0;
margin-top: 0;
font-weight:600!important;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title {
color: #0275ff;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title {
color:#fff!important;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title:after {
top: 60%;
color: #d8d8d8;
transition: color 0.3s;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title:after {
color: #fff;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .collapsible-sections-collapsible-body {
border-radius: 3px;
border-color: #ededed;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
position: relative;
z-index: 2;
padding-bottom: 40px;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error {
border-color: #b3304c !important;
background-color: #fff;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error + .collapsible-sections-collapsible-body .gfield_error .gfield_label {
color: #790000;
}
.CS_post_demo_1_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field {
border: 1px solid #EDEDED !important;
}Live Demo
Complex email sign-up forms
Easily add additional selections to your email sign up forms by asking your users what they like or are interested in. Keep the selections nicely hidden from view until they need to see the options using the collapsible section options.
.CS_post_demo_2_wrapper .gform_fields {
width: 70%!important;
margin: 0 auto!important;
background: white;
padding: 50px!important;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,.07)!important;
}
.gform_heading,
.gform_footer{
display:none!important;
}
.CS_post_demo_2_wrapper .profile {
width: 50px;
height: 50px;
border-radius: 100%;
float: right;
display: inline-block;
position: relative;
margin-top: -50px;
margin-right:0px;
}
.form-has-collapsible-sections_wrapper .ginput_complex label {
display:none!important;
}
.gform_fields>.gfield {
margin-bottom:0!important;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field {
border: 1px solid #b1c0cf!important;
border-radius: 3px!important;
font-size: 14px!important;
color: #1d1d1f!important;
height: 53px!important;
box-shadow: 0 2px 3px rgba(0,0,0,.07)!important;
width: 100%!important;
background: white;
margin: 0!important;
padding: 14px 20px!important;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open {
border-color: #0275ff !important;
background-color: #0275ff;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color:#fff!important;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field:nth-child(1) {
margin-top: 0 !important;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title {
font-size: 18px;
background: transparent;
padding: 0;
border-radius: 0;
margin-top: 0;
font-weight:600!important;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title {
color: #847EFC;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title {
color:#fff!important;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title:after {
top: 60%;
color: #d8d8d8;
transition: color 0.3s;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open .gsection_title:after {
color: #fff;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .collapsible-sections-collapsible-body {
border-radius: 3px;
border-color: #ededed;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
position: relative;
z-index: 2;
padding-bottom: 40px;
}
.CS_post_demo_2_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error + .collapsible-sections-collapsible-body .gfield_error .gfield_label {
color: #790000;
}Live Demo
Product order forms
See how amazing Image Choices and Collapsible work together in harmony on a page using just one Gravity Form. Create an order form and visualise your product options using Image Choices, then nicely group all the fields together into relevant sections using Collapsible Sections. Pure forms bliss.
/* Sections CSS */
.small-text {
text-align: center;
font-size: 12px;
line-height: 20px;
max-width: 70%;
margin: 20px auto;
display: block;
}
.CS_post_demo_3 .collapsible-sections-collapsible-body {
border:none!important;
}
.CS_post_demo_3 {
width:80%;
margin:0 auto;
}
.CS_post_demo_3 .gform_wrapper .gsection.collapsible-sections-field,
.CS_post_demo_3 .collapsible-sections-field {
margin-bottom:0px;
}
.form-has-collapsible-sections_wrapper .ginput_complex label {
display:none!important;
}
.CS_post_demo_3 .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open {
border-color: #none !important;
background: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color:#fff!important;
}
.CS_post_demo_3 .form-has-collapsible-sections .gsection.collapsible-sections-field:nth-child(1) {
margin-top: 0 !important;
}
.CS_post_demo_3 .form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title {
font-size: 14px;
background: transparent;
padding: 0;
border-radius: 0;
margin-top: 0;
color:#49372E;
font-weight:600!important;
text-align: left!important;
}
.CS_post_demo_3 .form-has-collapsible-sections .gsection.collapsible-sections-field .gsection_title:after {
content: "\f132";
top: 60%;
color: #d8d8d8;
transition: color 0.3s;
}
.CS_post_demo_3 .form-has-collapsible-sections .collapsible-sections-collapsible-body {
border-radius: 3px;
border-color: #ededed;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
position: relative;
z-index: 2;
padding-bottom: 40px;
}
.CS_post_demo_3 .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error {
border-color: #b3304c !important;
background-color: #fff;
}
.CS_post_demo_3 .form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-section-error + .collapsible-sections-collapsible-body .gfield_error .gfield_label {
color: #790000;
}
.CS_post_demo_3_wrapper .form-has-collapsible-sections .gsection.collapsible-sections-field {
border: 2px solid #F4E9D7!important;
background: #fff;
padding: 20px 35px!important;
border-radius: 10px;
text-align: center;
box-shadow: 4px 4px 20px 0 rgba(0,0,0,0.02);
margin: 0!important;
text-align: left!important;
}
.CS_post_demo_3 img.logo {
width:80px;
}
Want your Gravity Forms to look this good?
The best way to buy Image Choices and Collapsible Sections is in our Gravity Forms bundle. The bundle comes jam-packed with all 4 of our Gravity Forms add-on plugins at a discounted rate.
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.
Gravity Forms Image Choices
Easily add images as choices for Radio Buttons or Checkboxes fields within Gravity Forms. Includes support for Survey, Quiz, Product and Options.
