Use Gravity Forms Image Choices to display your icons inline in your forms
Use Gravity Forms Image Choices to display your icons inline in your forms to extend our great display styles available in the latest version of Image Choices 1.4+. Use the supplied image choices design styles to present your choices inline side by side, great for showcasing icons, logos and more.
How to get the inline style
Copy the below CSS to get the initial layout. The below CSS has more options like colours, don’t sizes and more. The main CSS property doing the heavy lifting here is the flex-direction: row; that turns the layouts from the column and label that sits below the image choice, to row, sitting to the right of the image choice.
The below CSS is to be used with the Simple display style inside Image Choices. The CSS has not been tested on any of the other styles or themes but with a little more CSS tweaking, you should be able to achieve what you are after.
/* ///////// Display Choices and labels Inline ///////// */
/* ///////////////////////////////////////////////////// */
.ic-theme--simple .image-choices-choice .gform-field-label {
flex-direction: row;
column-gap:20px;
justify-content: flex-start;
align-items: center;
padding: 15px 10px 15px 20px;
box-shadow: inset 0 0 0 2px #dbdbdb;
border-radius: 8px;
background:white;
}
.ic-theme--simple .image-choices-choice-image-wrap {
max-width: var(--ic-height);
margin-bottom: 0;
}
.ic-theme--simple .image-choices-choice-selected .image-choices-choice-image-wrap:after{
box-shadow:none;
}
.ic-theme--simple .image-choices-choice-selected label.gform-field-label{
box-shadow: inset 0 0 0 2px var(--ic-feature-color), 6.8px 2.8px 2.2px rgba(0, 0, 0, 0.03), 8.7px 6.7px 5.3px rgba(0, 0, 0, 0.048);
}
/* ///////////// Global CSS Style Overides ///////////// */
/* ///////////////////////////////////////////////////// */
.ic-theme--simple {
--ic-image-background-color: none;
/* Choice background color */
--ic-text-weight: 700;
/* font-weight */
--ic-text-size: 18px;
/* font-size */
--ic-text-line-height: 20px;
/* font-height */
--ic-text-color: #001446;
/* font-color */
--ic-selected-text-color: var(--ic-text-color);
/* select font-color */
--ic-column-spacing: 20px;
/* Verticle spacing between choices */
}
Image Choices settings
Listed below, are a couple of settings to get best your icons presenting inline in the nicest way possible. of course, you can change or tweak these settings, but these are what we found works best with the above matching CSS.
More CSS and Image Choices articles
Add icons to your Gravity Forms with custom CSS & Image Choices
We’ve had a great customer reach out for help on how to achieve a new style and layout for Image Choices. We loved the example style so much that we just had to give it a go and make the custom CSS for Gravity Forms, freely available for all our other users!
Style your Gravity Forms checkbox & radio fields into buttons with CSS
We've had a few JetSloth customers ask us to help with styling their radio and checkbox fields to look more like buttons. This goes hand in hand with our Gravity Forms Image Choices add-on.
