image next to radio buttons in wordpress forms

How to Add an Image Next to Radio Buttons in WordPress Forms

Have you ever wondered if you could allow users to select an image in your WordPress form instead of just text? With WPForms, you can easily add an image next to radio buttons in WordPress forms, so users can quickly select the right option they want.

In this tutorial, we’ll show you how to add an image next to radio buttons in WordPress forms.

If you’d prefer written instructions, continue reading below.

How to Add an Image Next to Radio Buttons in WordPress Forms

WPForms makes it super simple to add images or icons to your Multiple Choice radio buttons or your Checkboxes fields. Here are the steps you’ll need to follow:

Step 1: Create a Simple WordPress Form

The first thing youโ€™ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, youโ€™ll need to create a new form. There are tons of templates to choose from, and you can add radio buttons with images to any of them.

For our example, we’ll use the Simple Contact Form template.

The WPForms Simple Contact Form

For help with this step, see our tutorial on how to create a simple contact form as an example to get started.

Step 2: Customize Your WordPress Form

The Simple Contact Form template comes with the following default form fields:

  • Name
  • Email
  • Comment or Message

In our example, weโ€™ll add a Multiple Choice form field to our simple contact form and change the label and choices to ask why the user is contacting us.

Adding a Multiple Choice field to a simple contact form

You can add additional fields to your form by dragging them from the left hand panel to the right hand panel.

Then, click on the field to make any changes. You can also click on a form field and drag it to rearrange the order of the fields in your contact form.

Customizing the label and choices for a Multiple Choice field

You can add images next to the Multiple Choice and Multiple Items form fields, which are radio buttons, as well as the Checkboxes and Checkbox Items form fields.

The difference between a radio button and a checkbox is that radio buttons only allow site visitors to select one option, whereas site visitors can choose more than one option from a list of checkboxes.

Now itโ€™s time to add the images next to each radio button.

Step 3: Add Images to Radio Buttons

To add an image to your form’s radio buttons, toggle on the Use image choices setting in the Field Options panel.

Turning on image choices for a Multiple Choice field

When you click that box, youโ€™ll see an Upload Image button appear for each radio button on your form.

Uploading image choices to a Multiple Choice field

There will also be a placeholder box in the preview panel where each image will display once uploaded.

To add an image, click on the Upload Image button. This will open your WordPress Media Library so you can upload a new image to WordPress or choose from your existing ones.

Note: Images will not be cropped or resized when you add them to your form. For best results, we recommend making all image choices the same size and 250ร—250 pixels or smaller.

Add Icon Choices to Radio Buttons

Depending on your form, it might make more sense to use icon choices than image choices. You can easily turn on this option the same way you did the image choices by selectingย Use icon choices in the Field Options panel.

Using icon choices in a Multiple Choice field

For more details, see our guide on using icon choices in WPForms.

Step 4: Customize Your Image Choices

WPForms makes customizing your image choices super simple thanks to the built-in customization options.

First, choose your preferredย Image Choice Style.

Multiple Choice field image choice style option

Modern displays selected images in a shadowed box and adds a green checkmark to the center. Classic displays selected images with a thick, grey border. The None option will not add any special styling; instead youโ€™ll see traditional radio buttons next to each image for site visitors to choose from.

Then you can view more options by clicking on theย Advanced tab.

The Advanced options for the Multiple Choice field

Importantly, make sure to select your preferredย Choice Layout. You can pick from 1, 2, or 3 columns. You also have the option to choose Inline, which places as many options as possible in each row before adding another. Inline is the default Choice Layout for all WordPress forms displaying image choices.

You can also select the Randomize Choices option if you want to randomize the order of the image choices every time a new user visits your website.

Step 5: Enable Survey Reporting

If you want to see how many people choose each image choice you offer, you can enable survey reporting for your forms by installing and activating the Surveys and Polls addon.

To do this, go to WPForms ยป Addons and find the one labeled Surveys and Polls Addon.

Click Install Addon and then Activate.

Installing the Surveys and Polls addon

WPForms lets you collect survey results for the following form fields:

To enable survey reporting for all compatible fields in a form,ย go to Settings ยป Surveys and Polls in the form builder and select the Enable Survey Reporting option.

Enabling survey reporting for a form

If you only want to collect data for a particular field, open its Field Options panel and click on the Advanced tab. Then toggle on Enable Survey Reporting.

Enabling survey reporting for a Multiple Choice field with image choices

Once people start filling out your form, complete with images next to the radio buttons, youโ€™ll be able to generate survey reports in the WordPress dashboard to see the results.

To generate a survey report, go to WPForms ยป All Forms and hover over your form to display the options. Then, click on Survey Results.

Opening survey results for a simple contact form

Once you click that, youโ€™ll see your formโ€™s results:

Viewing the survey report for a simple contact form

Next, Make More Money Online

And there you have it! You now know how to add an image next to radio buttons in WordPress forms.

If youโ€™re interested in making money online, you can check out our tutorial on how to create a simple order form in WordPress and add images next to each item you have for sale.

Create Your WordPress Form Now

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

And donโ€™t forget, if you like this article, then please follow us on Facebook and Twitter.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. radio image is not displayed in payment fields … its working fine in “standard fields” but not working in payment fields.

    any idea why ??

    1. Hi Raju,

      Sorry about that! Yes, this is currently prevented intentionally because of how our payment integrations handle these labels (HTML will cause issues when that data is sent to Stripe or PayPal). This is on our team’s radar, though, and our developers are working on a way around this. I don’t have an ETA on that, but we hope to address it soon!

      In case it helps, images can still be added to each item option with some custom CSS. This requires some form-specific CSS styling, but if you’d be willing to get in touch with our support team we can help you to accomplish this ๐Ÿ™‚

  2. Is “Image Choices to WPForms” a basic form capability?

    My site contains several galleries of unchanging images to a user. There are between 5 and 30 images on a form and 50 forms(galleries). I want the user to select an image on a form then move to the next form; select an image and so on. Every image selection corresponds to a paragraph of text that I want to provide to the user in a report. Can this be done with WPForms? With only minor code additions?

  3. This is a great feature, however both modern and classic style are very poorly designed. On classic the grey frame is very difficult to see and on modern, the check is on the image and often difficult to see, it shows black check icon on many phones which makes it even more difficult to see and the making bold of the text moves fields around sometimes when they are on mobile…
    Just keep it simple and make a bold COLORED frame that does not change the fields width

    1. Hey Martin – Thanks for the feedback & suggestions! I have noted it in our tracker so dev team can consider it while working on our roadmap for future updates, meanwhile if you wish you can reach out to our support team for some help on it and they can assist you with some custom CSS code to make it look like you need.

      If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.

      Thanks ๐Ÿ™‚

  4. Hello,

    I used the image choice together with checkboxes. It works fine on desktop and tablet mode, but not on mobile. The whole checkbox section with all images and checkboxes disappears from the breakpoint 600px down. I have some custom CSS, I thought it might be my CSS that somehow caused the issues and removed them but no luck.
    I use the free version of WPFrom.

    Any idea ?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.