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
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.
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!
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
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)
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!