How to Replace Radio Buttons with Images in WordPress Forms

Want people to pick an option instantly instead of reading through every choice first? Image radio buttons show a picture next to each option, so the decision is faster. This guide shows you how to add image radio buttons to WordPress forms with Formidable Forms.

Approximate read time: 6 minutes

What image radio buttons are (and when to use them)

An image radio button is a normal single-select radio field where each option shows a picture instead of, or alongside, a plain text label. The user still picks one option and the form still stores one value, but it's just a set of pictures instead of a list of words.

They're worth reaching for whenever the option is something you can see:

• Products and variations. Colors, patterns, materials, or sizes people would rather see than read.
• Plans and packages. A visual card for each tier reads faster than a paragraph.
• Ratings and reactions. Emoji or icon picture options for a quick "how did we do?"
• Layouts and templates. Let someone pick the design they want by looking at a thumbnail of each.

Some options are abstract, like a date, a yes or no, or a name. Plain radio buttons are still the right call for those, but image radio buttons make more sense when a picture helps someone decide faster.

What you'll need

To turn on image options, you'll need at least a Basic license. Formidable Forms Lite still gives you the drag and drop builder and the radio field itself, just not the image toggle.

If you also want to display what visitors picked in a front-end table or gallery later, Formidable Views is included on the Plus license and above.

How to add image radio buttons in WordPress (step by step)

Here's the full build, from a plain radio field to clickable picture options on a published page. The example is a product color picker, but the same steps work for plans, layouts, or any visual option set.

Step 1: Install Formidable Forms and activate your license

Install the free Formidable Forms plugin from your WordPress dashboard under Plugins → Add New, then go to Formidable → Global Settings and enter your license key so the image options unlock.

Step 2: Create your form and add a Radio Buttons field

Go to Formidable → Forms → Add New and start from a blank form.

Drag a Radio Buttons field onto the form and give it a clear label, like Choose a color.

Step 3: Add your options

Click into the field and add one option per choice, for example Red, Blue, and Green. Keep the labels short, since they'll sit under each image.

Step 4: Turn on image options

Open the field's Field Options and under Display format, switch from Simple to Images. This is the setting that turns each plain option into a slot where you can attach a picture.

Step 5: Attach an image to each option

An Upload image control now appears next to every option. Click it and either upload a picture or pick one from your WordPress media library. Do this for Red, Blue, and Green so each option shows its own swatch.

Choose an Image Size that fits your layout (Small, Medium, Large, or Extra Large). Small works well for a row of swatches. Medium or Large suit fuller cards like plan tiers.

Step 6: Lay the options out

Formidable doesn't have a built-in "columns" toggle for image options, so by default they stack.

To lay them out side by side, add a class name in the field's CSS Layout Classes box (visible in the Field Options panel above), then add a few lines of CSS under Formidable → Styles → Custom CSS targeting that class, for example .your-class .frm_opt_container { display: flex; gap: 16px; }.

A row of picture options reads best when they line up evenly.

Step 7: Publish and test

Add the form to any page with the Formidable Forms block or shortcode, then run through it as a user.

Click each image to confirm the right value gets selected and stored, and check it on a phone too, since Formidable's forms are responsive out of the box and the image options wrap cleanly on a small screen.

Using WooCommerce variations as image radio buttons

WooCommerce shows product variations like color, size, or style as plain dropdowns by default, which hides what shoppers actually want to see. You can bring the same picture-first pattern to a WooCommerce product so buyers pick a picture instead of a menu item.

There are two ways to do it, depending on how your store is built:

• On a WooCommerce product page. Swap the default variation dropdown for image swatches so each color or style shows its own picture. This turns "select an option" menus into clickable picture options that mirror the radio pattern above.
• On a Formidable Forms order or quote form. If you take custom orders, configuration requests, or quotes through a form rather than the standard cart, build the variation choice as a Radio Buttons field with image options, following Steps 2 through 6 above, then connect a Product field so the selected variation carries its price into the order total.

The second route is useful when you're collecting more than a simple add-to-cart, like a made-to-order product where the shopper picks a fabric image, adds a note, and you follow up with a quote.

Either way, the goal is the same: let the picture do the choosing.

Styling and accessibility tips

A few small touches keep image radio buttons clean and usable:

• Keep images the same shape and size. Mismatched dimensions make a row of options look messy. Crop to a consistent ratio before you upload.
• Keep a text label under each image. The picture helps, but the label keeps the option clear for screen readers and for anyone whose images don't load.
• Add a light border or highlight on the selected option so it's obvious which one is picked. If you're comfortable writing CSS (the code that controls styling), a couple of lines on the checked state do the job. The visual styling built into Formidable Forms handles most of it without any code.

Give your form a visual upgrade

Image radio buttons take a plain WordPress form field and turn it into a set of clickable picture options, which is exactly what you want when the option is something people would rather see than read.

Add a Radio Buttons field, flip on image options, drop a picture beside each option, and you've got a friendlier way for people to fill out your form.

If you want to take those results further and show them back on your site, check out Formidable Views, and the full features overview covers every other field type you can mix in. Otherwise, pick the license that fits, upload your images, and give your form the visual upgrade it's been missing.

Get Formidable Forms and build it.