For years, adding images to radio buttons and checkboxes in Gravity Forms meant installing an add-on or writing custom CSS. Since Gravity Forms 2.9, you can do it with a built-in field: Image Choice.
Image choices are great for picking a product style, a color, a package or a design. People recognize a picture faster than they read a label.
Requirements
- Gravity Forms 2.9 or newer (any license)
- The images you want to use, uploaded to your Media Library or ready to upload
How to Add Images to Choices
- Open your form in the form editor.
- From the Standard Fields panel, add an Image Choice field.
- In the field settings, add your choices. For each choice, click the image button and pick or upload an image from the Media Library. No HTML needed.
- Choose whether people can select one choice (works like radio buttons) or multiple choices (works like checkboxes). With multiple, you can also set an exact number or a range of selections.
- Save the form and preview it.
In the block editor, the Gravity Forms block’s style settings let you change the image shape (square or circle), remove the card outline and adjust the label font size and color.
Related: The Multiple Choice Field
Gravity Forms 2.9 also added a Multiple Choice field. It combines checkboxes and radio buttons into one field with a setting to switch between them, and you can add, remove or reorder choices without affecting earlier entries.
When an Add-On Still Makes Sense
The built-in field covers most needs. JetSloth Image Choices is still worth a look if you want:
- Images on product and option fields (pricing fields), not just a standalone choice field
- More layout and styling presets
- Lightbox previews of larger images
You can also make the built-in field more interactive. See how to turn the Image Choice field into a carousel.
Need More Help?
If you still need help, use the chat or leave a comment below and we’ll get back to you.
Comments