How to Replace Radio Buttons with Images in WordPress Forms

Did you know you can replace radio buttons with images in your WordPress forms? This tutorial will show you how to make your online forms look amazing!

Approximate read-time: 4.5 minutes

You've worked hard on your website design & branding. After a ton of work, things are finally looking just how you want them. There's just one problem: your web forms don't match your site.

Unfortunately, we see this design flaw very often. The good news is there are many ways to improve the look of forms on your site. One way is to replace radio buttons with custom images.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

To do this, you'll need a WordPress form builder with enough flexibility to get the job done. Today, we'll be showing you how to use Formidable Forms to modify standard radio buttons with custom images.

The best thing about Formidable Forms is that it allows for a huge range of styling options. With this WordPress plugin, you can adjust the look of everything from radio buttons to simple contact forms.

In this guide, we'll show you how to replace radio buttons with images in just 5 easy steps. The only limit is your imagination!

2020 radio button images UPDATE!

In July 2020, we updated our radio buttons so that images can be automatically applied! Simply put, this means that replacing radio buttons with images is now as easy as clicking a box

We talk about this feature in detail as part of our WordPress polls article. Also, we wrote another tutorial on creating an emoji rating scale that our audience is really loving at the moment. Of course, that tutorial shows you how to turn radio buttons into emojis using this feature.

Does that mean you can't follow this tutorial? Not necessarily. If you follow this tutorial, you'll have more control over the exact placement of the images. You will also be able to control image size, borders, hover effects, and a few more variables that are not part of our built-in radio button image feature.

Our best advice, check out the links we mentioned earlier and see if our built-in radio button images will work for you. If not, come right back here and follow along!

Replace radio buttons with images

Replacing radio buttons with images was something we had covered in our checkboxes and radio buttons help doc long ago. But one Formidable superuser took things to the next level.

Roman Cremonese, a realtor from Victoria, Canada, built a multi-page form with customized radio buttons. In just 5 steps, we'll cover the basics & the extra bits that really make this solution really eye-catching.

1. Install Formidable Forms

Changing radio buttons into images is a premium feature. This is true for just about every WordPress form builder out there. In this case, our Formidable Basic plan is all you need! With Formidable Basic, you'll unlock the separate values feature needed to adjust radio buttons.

If you're serious about upgrading your website design, this is worth it. For new customers, Formidable Basic starts at just $99/year.

Get Formidable Basic

The best part is you can try our plugin risk-free for 14-days. If you don't like it, we'll give you your money back - no questions asked. That means you can grab our Formidable Basic plan & give this tutorial a try right now.

Formidable does much more than optimize radio buttons. Our premium plans have dozens of powerful WordPress form building features!

Here's what you need to get started with Formidable:

An updated WordPress site
Formidable Premium license
(purchased at our pricing page)
Around 5 minutes of your time

👉 Learn more: install & activate Formidable Forms

2. Use separate values in a radio button

First, create a form and insert a radio button field in your form, and add the number of options that you would like.

Then, in the field settings for this radio field, check the box to use Separate Values. This will allow you to add a text value as well as your image.

3. Include the images with a radio button

In the 'Option Label' column, insert the code that contains the image URL for each option. You may need to resize your images so they fit your form perfectly. The code in your option labels should look something like this: <img src="your-image-url.png">

4. Set a text value

Since the option label is used to display the image, we should also add text in the 'Saved Value' column. This helps a user identify the options at a glance, and gives a text value that can be sent in email notifications.

5. Publish your WordPress form

Save the form and insert the form shortcode on a page of your WordPress website. Now the form shows a list of images. The form saves the text value for that image when selected.

Make your radio button images beautiful!

The steps above are fairly straight-forward. But your radio button images can be even more eye-catching! Let's add some extra CSS to make it pretty.

First, the actual "button" part of the radio button can be hidden by adding a little custom CSS. Swap X for the ID of your radio button field and add this under Formidable → Styles → Custom CSS:

#frm_field_X_container input {
 display: none;
}

You need a way to show your users which image was selected once the button is hidden. You can target the unchecked images using this CSS class. Again, swap X for the ID of your radio button field: #frm_field_X_container img

You can target selected images with CSS using this class:
#frm_field_X_container input:checked + img

This allows you to add borders, filters, padding, etc to the radio button image that is selected.

Add radio button image effects on hover and click

If you want to add a hover effect on your radio button images, you'll need to use a bit of code. Luckily we've nailed down the exact code you need below!

There isn't an automatic way to have images "swap" when highlighted for radio buttons. With the code below, a simple CSS filter is removed when the button is chosen. This makes it appear as if the image changed.

You don't need to be a CSS expert to make this work though.

Here's how this works in a nutshell. Each image has the pale semi-circle in the background denoting that it had been selected. A brightness filter hides this semi-circle for un-selected images. This brightness filter is removed when the option is selected.

If you're scratching your head, don't worry. Just copy and paste this CSS:

#frm_field_X_container img {
 -webkit-transition: all 100ms ease-in;
 -moz-transition: all 100ms ease-in;
 transition: all 100ms ease-in;
 -webkit-filter: brightness(1.4) grayscale(0) opacity(1);
 -moz-filter: brightness(1.4) grayscale(0) opacity(1);
 filter: brightness(1.4) grayscale(0) opacity(1);
}

#frm_field_X_container img:hover,
#frm_field_X_container input:checked + img {
 -webkit-filter: none;
 -moz-filter: none;
 filter: none;
}

And if you aren't sure where to put that code, don't sweat it. Our customers can access our expert tech support team, available 7 days a week!

That's it - a simple way to use images for beautiful radio buttons!

We love to see examples of how you have replaced radio buttons with images on your website. If you are already using Formidable Forms for WordPress forms, let us know in the comments below to provide inspiration to others building their forms.