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!

Add icons to your Gravity Forms with custom CSS & Image Choices

The below designs and CSS examples were tested in Gravity Forms version 2.6.6 with the default WordPress 2022 theme installed. These demos only support Gravity Forms 2.6.6+. Depending on the theme you are using, you may get different end results. Some basic further CSS tweaking will likely be required to get the result you want. Using older versions of Gravity Forms will most likely lead to unwanted end results.

You’ll need a copy of Gravity Forms installed, along with our Gravity Forms Image Choices add-on installed. The first step is to download a copy of our exported form, and import it into your Gravity Forms.

Download the demo form

Every demo comes with a packaged form download. All you need to do is download the form JSON file, and import it into your gravity Forms. If you’re already a JetSloth customer and using Image Choices, each demo form export has the CSS already included in the image choices custom CSS settings. So take advantage of that!

Download Form Export

Adding the CSS

Every design has the required CSS listed below. If you’re not already using Image Choices, you can add the custom CSS to your theme in a few ways suggested below:

Install a custom CSS plugin such as Simple Custom CSS
Add your CSS using your theme editor or customiser
User the Image Choice custom CSS setting if you are adding Images to your choices

Make sure you set your image choices theme style to none in the form or field setting first.

/*////////////////////////// Color Variables //////////////////////////*/
:root {
    /*Purple*/
    --theme1: #7245F1;
    --theme1-light: #F0ECFD;
    /*Orange*/
    --theme2: #FFA630;
    --theme2-light: #FFF7EC;
    /*Blue*/
    --theme3: #0076FF;
    --theme3-light: #E4EEF6;
    /*Aqua*/
    --theme4: #48D6D2;
    --theme4-light: #EAFFFE;
}
.image-choices-field {
    --ic-image-background-color: none!important;
}

/*////////////////////////// Purple Styles //////////////////////////*/
.ic-icon-box .theme1.image-choices-field .image-choices-choice{
    background:var(--theme1-light);
}
.ic-icon-box .theme1.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme1);
}
.ic-icon-box .theme1.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme1);
}
.ic-icon-box .theme1.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme1);
}
/*////////////////////////// Orange Styles //////////////////////////*/
.ic-icon-box .theme2.image-choices-field .image-choices-choice{
    background:var(--theme2-light);
}
.ic-icon-box .theme2.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme2);
}
.ic-icon-box .theme2.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme2);
}
.ic-icon-box .theme2.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme2);
}
/*////////////////////////// Blue Styles //////////////////////////*/
.ic-icon-box .theme3.image-choices-field .image-choices-choice{
    background:var(--theme3-light);
}
.ic-icon-box .theme3.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme3);
}
.ic-icon-box .theme3.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme3);
}
.ic-icon-box .theme3.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme3);
}
/*////////////////////////// Blue Styles //////////////////////////*/
.ic-icon-box .theme4.image-choices-field .image-choices-choice{
    background:var(--theme4-light);
}
.ic-icon-box .theme4.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme4);
}
.ic-icon-box .theme4.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme4);
}
.ic-icon-box .theme4.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme4);
}


/*////////////////////////// Default Styles //////////////////////////*/
/*Optional wrapper styles*/
.ic-icon-box {
    background: white;
    border-radius: 10px;
    padding: 50px;
    border: 2px dotted #cbd0d4;
}
/*Background choice styles*/
.ic-icon-box .image-choices-field .image-choices-choice {
    position: relative;
    padding: 25px;
    border:2px solid  transparent;
    border-radius: 10px;
    transition: all 0.3s;
}
/*Label choice selected styles*/
.ic-icon-box .image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-text  {
    color: white;
}
/*Text label styles*/
.ic-icon-box .image-choices-field.image-choices-show-labels .image-choices-choice-text {
    display: block;
    font-size: 14px;
    letter-spacing: -0.17px;
    text-align: left;
    font-weight:700;
    margin-top:30px;
}
/*Icon styles*/
.ic-icon-box .image-choices-field .image-choices-choice .image-choices-choice-image-wrap {
    display: block!important;
    background-size: contain;
    width: 25px;
    height: 30px;
    text-align: left;
    position: relative;
    z-index: 2;
    top: 3px;
    left: 11px;
}
/*Label resets*/
.ic-icon-box .image-choices-field .image-choices-choice label {
    cursor: pointer;
    display: block !important;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    width: auto!important;
    border: none;
    max-width: unset!important;
}
/*White box behind icon*/
.ic-icon-box .image-choices-field .image-choices-choice label:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0px;
    background: white;
    border-radius: 10px;
    z-index: 1;
    width: 45px;
    height: 45px;
}

Editing the colours, images, and text in the design

We’ve made editing and tweaking the CSS in the custom Gravity Forms styles as easy as possible.

Custom Gravity Forms designs with CSS — Update the colour themes in CSS

Changing the custom CSS colors

We’ve added CSS variables to the top of every custom CSS form demo. Simply update the mentioned variables with the HEX color value you’d like to change.

Adding class names to your form and fields

You’ll need to add 2 CSS class names to your form. 1 to your form wrapper found in the form settings ic-icon-box, and the final to your field, to add the colours you want to use. I’ve also added the gf_list_3col class to the radio field so it shows up in 3 columns.

Add the ic-icon-box class to your form settings

Add gf_list_3col class + the colour scheme you want to use (theme1, theme2, theme3, theme4)

Summary & other CSS articles

Be sure to comment, share and send your finished examples on social media, or in the comments below! We’d love to see what you make of these examples!