Skip to content

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.

Image Choices to display your icons inline in your forms.
Use Gravity Forms Image Choices to display your icons inline in your forms
Select Brands

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;
     justify-content: flex-start;
     align-items: center;
     padding: 15px 10px 15px 20px;
     box-shadow: inset 0 0 0 2px #dbdbdb;
     border-radius: 8px;
 .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{
 .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.

Use Gravity Forms Image Choices to display your icons inline in your forms
Form image choices settings

More CSS and Image Choices articles

Sep 12, 2022

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!

Jul 26, 2022

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.