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.

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 3 easy steps. The only limit is your imagination!

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.

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, a realtor from Victoria, Canada, built a multi-page form with image radio buttons. In just 3 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!

If you're serious about upgrading your website design, this is worth it. For new customers, Formidable Basic starts at just $79/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. Replace radio button with image

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 Use images for options. This will allow you to add a text value as well as your image.

Click the Upload image button to insert an image for each option. You may need to resize your images so they fit your form perfectly.

3. 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.

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;
}

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

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 your WordPress forms, let us know in the comments below to provide inspiration to others building their forms.

Follow us on the Formidable blog for all things WordPress. See you next time!

Read more about WordPress forms

• How to Create an Emoji Rating Scale in WordPress [No Code!]
  Read More

  The Ultimate WordPress Poll Plugin (With Images)!
  Read More

---

Formidable Forms is the WordPress form builder plugin that does it all. Test it out with our free WordPress plugin or get started with our full-featured premium versions.