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

September 12, 2022 by JetSloth

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.

Form Downloads

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:


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.

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)

Gravity Forms CSS

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!

Custom Gravity Forms designs with CSS

Style your Gravity Forms checkbox & radio fields into buttons with CSS