WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

image next to radio buttons in wordpress forms

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

by Lindsay Liedke on Aug 20, 2018

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 article, we’ll show you how to add an image next to radio buttons in WordPress forms.

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 form. For help with this step, see our tutorial on how to create a simple contact form as an example to get started.

Simple Contact Form

Step 2: Customize Your WordPress Form

The simple contact form comes with the following default form fields:

  • Name
  • Email
  • Comment or Message

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 on your contact form.

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

Just in case you’re wondering, 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.

In our example, we’ll add a Multiple Choice form field to our simple contact form and change the label and choices.

Multiple Choice Form Field

Now it’s time to add the images next to each radio button.

Step 3: Add an Image to Radio Buttons

To add an image to your form’s radio buttons, start by clicking on the Use image choices checkbox in the form editor.

Image Choices Checkbox

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

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

Upload Image

To add an image, click on the Upload Image button. This will open your WordPress Media Library so you can choose the image you want to display.

Use Image

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.

This is what our image choices will look like:

Image Choice Preview

Step 4: Customize Your Image Choices

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

To view these options, click on Advanced Options.

Advanced Options

Two customization options are added to the Advanced Options section when you enable Image Choices on your WordPress forms:

  1. Image Choice Style: choose from Modern, Classic, or None. 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.
  2. Choice Layout: choose how you many columns are used to display your image choices. You can pick from one, two, or three 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 checkbox if you want to randomize the order of the image choices every time a new user visits your website.

Randomize Choices

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 » Addon and find the one labeled Surveys and Polls Addon.

Click Install Addon and then Activate.

Surveys and Polls Addon

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

To enable survey reporting for all forms on your website, go to Settings » Surveys and Polls and select the Enable Survey Reporting checkbox.

Site-wide Survey Reporting

If you only want to collect data on this particular form, go to the form editor, scroll down to the Advanced Settings section, and click on Enable Survey Reporting.

Enable Survey Reporting

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.

Survey Results

Once you click that, you’ll see your form’s results:

Survey Results Graph

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.

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.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. 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 🙂

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.