How to Replace Radio Buttons with Images in WordPress Forms

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

You've worked hard on your website and your style and branding are just how you want them. Your forms should have the same visual appeal as the rest of your site. The tools built into Formidable allow a huge range of contact form styling options with zero fuss. But sometimes a little extra fuss can be really worthwhile.

Do you want a sleek and stylish form were users click on icons or images instead of radio buttons? In this tutorial, I'll show you how easy it is to modify the standard radio buttons with custom images. We have instructions for adding images to checkboxes and radio buttons in our docs, but some users have taken it one step further.

This article was inspired by one of our genius users who took that guide and added his own extras to produce a visually stunning form. Roman Cremonese built a multi-page form with customized radio buttons on page two. We'll quickly cover the basics or this method, but the main focus is the extra bits that really make this form eye-catching.

Replace radio buttons with images

Step 1 - 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. 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.

Step 2 - 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">

Step 3 - Set a text value to be saved

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.

Step 4 - 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. When an image is selected, the form saves the text value for that image.

Make your radio button images beautiful!

The steps above are fairly straight-forward and echo the documentation for this feature. 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;
}

Once the button is hidden, you need a way to show your users which image was selected. 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

Selected images can be targeted in your 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

Here's the clever bit that caught my eye. If you click the link to the form Roman built you will see each image changes when the option is selected.

There isn't a simple way to have images "swap" when highlighted for radio buttons, so I was intrigued. I took a look to see how this was achieved and discovered a method that is well thought out and very simple to implement!

At first glance, it looks like the images are being swapped out, but it is actually the same image. A simple CSS filter is removed when the button is chosen, making it appear as if the image changed.

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 - all using 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 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.

Not using Formidable Forms yet? Learn more about the features that make Formidable Forms the best online form builder plugin.