Using Image Choices to list radio buttons vertically with descriptions
Using Image Choices to list radio buttons vertically using Image Choices to list radio buttons vertically with descriptions. We recently had one of our fantastic customers reach out and ask if it was possible to use image choices to vertically list the radio options and have text description next to them. We’ve never tried this before and figured it could be a neat idea if it worked! So here’s how we did it!
Vertical radio list with descriptions demo
We wanted to see if we could achieve this effect with nothing more than the Image Choices Gravity Forms addon, no extra JS or fancy code, just some custom CSS. We started with one of our base CSS styled examples from our support page. Then went onto further customising the CSS to get the layout and look we were after.
none in the field or form settings. Also add the class ic-theme--vertical to your image choice field. How to do it
Create a new radio or checkbox field, and add some images as normal. Then add in all your description text into the label field like the example screenshot below.
Applying the Custom CSS
Head over to the forms setting tabs and click on the Image Choices option. Paste in your custom CSS into the text editor and turn ON the ignore global CSS option. In some cases, you may have to leave this unchecked, however.
/* Style overides - edit these */
.image-choices-field.ic-theme--vertical {
--ic-width: 200px;
--ic-height: 200px;
--ic-text-color: #4c6a85;
--ic-text-size:15px;
--ic-text-line-height:25px;
--ic-text-weight:normal;
--ic-border-radius: 15px;
--ic-heading-color: #1d1d1f;
--ic-heading-size:30px;
--ic-image-col-width:30%;
--ic-text-col-width:60%;
}
.ic-theme--vertical .image-choices-choice .image-choices-choice-text h2 {
margin: 0px;
margin-bottom: 5px;
font-size:var(--ic-heading-size)!important;
color:var(--ic-heading-color);
}
.ic-theme--vertical .image-choices-choice {
padding: 30px;
border-radius:var(--ic-border-radius);
}
.ic-theme--vertical .image-choices-choice .gform-field-label {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
width: 100%;
position: relative;
}
.ic-theme--vertical:not([class*=ic-cols--]) .image-choices-choice .gform-field-label {
width: var(--ic-width);
max-width: 100%;
}
.ic-theme--vertical .image-choices-choice-image-wrap{
display: block;
width: 100%;
height: var(--ic-height);
border-radius: var(--ic-border-radius);
}
.ic-theme--vertical .image-choices-choice-image-wrap {
position: relative;
z-index: 1;
margin-bottom: var(--ic-padding);
width: var(--ic-image-col-width);
}
.ic-theme--vertical .image-choices-choice-text {
width: var(--ic-text-col-width);
}
.ic-theme--vertical .image-choices-choice-image-wrap img {
position: relative;
z-index: 0;
}
.ic-theme--vertical .image-choices-choice-selected {
box-shadow: 0 2px 3px rgba(0,0,0,.07);
pointer-events: none;
background: #fff;
}
@media only screen and (max-width: 679px){
.ic-theme--vertical .image-choices-choice-image-wrap,
.ic-theme--vertical .image-choices-choice-text {
width: 100%;
}
.ic-theme--vertical .image-choices-choice .gform-field-label {
display:block!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. We’ve added in mobile responsive styles to make sure the layout looks good on mobile devices but WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further. You’ll also need a valid version of Gravity Forms.
