### [How to Add Radio Buttons With Images to WordPress Forms](https://wpforms.com/how-to-add-an-image-next-to-radio-buttons-in-wordpress-forms/)

**Published:** August 20, 2018
**Author:** Molly Tyler

**Excerpt:** Would you like to show images next to the radio buttons in your WordPress forms? WPForms makes it super easy to include images in your forms with the image choices option for the Multiple Choice field. In this tutorial, we'll show you how to quickly add images next to your radio buttons with WPForms!

**Content:**

Have you ever wondered if you could allow users to select an image in your WordPress form instead of just text?

Let’s face it. We’re all naturally drawn to interactive and visual elements. A plain text-only form is functionally fine, but a form with selectable images translates to a MUCH better user experience.

And you know what? It’s adding images to radio buttons in a WordPress form is actually pretty easy to do as I’m going to show you in this article.

## Note

You can add images to your radio field with WPForms Lite, entirely for free. But if you want to unlock additional features for making your forms more interactive, upgrading to [**WPForms Pro** ](https://wpforms.com/pricing/)is well worth it!

## 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:

If you prefer written instructions, continue reading below.

- [Step 1: Create a Simple WordPress Form](#step-1-create-a-simple-wordpress-form)
- [Step 2: Customize Your WordPress Form](#step-2-customize-your-wordpress-form)
- [Step 3: Add Images to Radio Buttons](#step-3-add-images-to-radio-buttons)
- [Step 4: Customize Your Image Choices](#step-4-customize-your-image-choices)
- [Step 5: Enable Survey Reporting](#step-5-enable-survey-reporting)

### Step 1: Create a Simple WordPress Form

The first thing you’ll need to do is install and activate the [WPForms plugin](https://wpforms.com/pricing/). For more details, see this step-by-step guide on [how to install a plugin in WordPress](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/ "Step by step guide on How to Install a WordPress Plugin").

After you’ve successfully installed WPForms on your site, you can start creating your form by opening your WordPress dashboard and navigating to **WPForms » Add New**.

![Add new form](https://wpforms.com/wp-content/uploads/2023/12/add-new-form-updated.png)After that, you can start by giving a name to your form and then picking a template. For this example, I’ll use the Simple Contact Form template, which is one of the [2,100+ WordPress form templates](https://wpforms.com/templates/) available.

![Use Simple Contact Form template](https://wpforms.com/wp-content/uploads/2020/09/use-template.png)As soon as you select a template, it will load up inside the form builder.

![The WPForms Simple Contact Form](https://wpforms.com/wp-content/uploads/2019/05/simple-contact-form.png)You can also see our tutorial on [how to create a simple contact form](https://wpforms.com/how-to-create-a-contact-form-in-wordpress/) 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](https://wpforms.com/wp-content/uploads/2023/01/simple-contact-add-multiple-choice.png)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](https://wpforms.com/wp-content/uploads/2023/01/simple-contact-customize-multiple-choice.png)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.

## Note

The [difference between a radio button and a checkbox](https://wpforms.com/radio-button-vs-checkbox/) is that radio buttons only allow site visitors to select one option, whereas people 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, open the Field Options for your Multiple Choices field and then enable the **Use image choices** toggle.

![Turning on image choices for a Multiple Choice field](https://wpforms.com/wp-content/uploads/2023/01/use-image-choices.png)After enabling Image Choices, you can upload an image for each choice in your field.

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.

![Uploading image choices to a Multiple Choice field](https://wpforms.com/wp-content/uploads/2023/01/upload-image-choices.png)## 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](https://wpforms.com/wp-content/uploads/2023/01/use-icon-choices.png)WPForms uses an extensive library of ready-made icons, so you don’t have to upload these. You can simply select the icon you need from the available options.

For more details, see our guide on [using icon choices in WPForms](https://wpforms.com/docs/using-icon-choices/).

### 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](https://wpforms.com/wp-content/uploads/2023/01/multiple-choice-image-choice-style.png)The Modern style displays selected images in a shadowed box and adds a green checkmark to the center. Classic style 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](https://wpforms.com/wp-content/uploads/2023/01/multiple-choice-advanced-options.png)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](https://wpforms.com/addons/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](https://wpforms.com/wp-content/uploads/2022/08/install-surveys-and-polls-addon-1.png)WPForms lets you collect survey results for the following form fields:

- Single Line Text
- Paragraph Text
- Dropdown
- Checkboxes
- Multiple Choice
- [Rating](https://wpforms.com/how-to-add-user-ratings-to-your-wordpress-forms-step-by-step/)
- [Likert Scale](https://wpforms.com/how-to-add-a-likert-scale-to-your-wordpress-forms-step-by-step/)
- [Net Promoter Score (NPS)](https://wpforms.com/how-to-create-a-net-promoter-score-nps-survey-in-wordpress/)

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](https://wpforms.com/wp-content/uploads/2022/10/enable-form-survey-reporting.png)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](https://wpforms.com/wp-content/uploads/2023/01/enable-survey-reporting-image-choices.png)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](https://wpforms.com/wp-content/uploads/2023/01/simple-contact-survey-results.png)With WPForms, your data is now automatically generated into beautiful reports that are easy for the human brain to understand.

![Viewing the survey report for a simple contact form](https://wpforms.com/wp-content/uploads/2023/01/simple-contact-survey-report.png)### Adding Images Next to Radio Fields – FAQs

I’ve put together a few common questions that our team has received lately about radio fields and images. Give these a read if you have additional questions on this topic.

#### Why should I add images next to radio buttons in WordPress forms?

Images work wonders as visual aids in WordPress forms; they’re much more easily noticeable and immediately draw the visitor’s eyes.

As a result, forms that have visual elements are easier to fill out because it takes less time to read and understand them, leading to higher user engagement and improved overall experience.

#### Do I need any coding experience to add images to my form?

If you’re using a user-friendly plugin like WPForms, you don’t need a single line of code to add images to your forms.

Adding images to your form with WPForms is just like uploading images to your WordPress Media Gallery. Anyone can do it!

#### Will adding images slow down my website?

While adding images does affect page load speed, a lot of it depends on your particular website. If you’re careful about the amount of images you’re adding and ensuring that they’re all optimized, there will be no negative impact on your page speed.

#### Can I customize the appearance of the radio buttons and images?

Yes, you can customize the appearance of radio buttons and images in WPForms. For instance, you can choose from different field layouts such as inline, 1-column, 2-column, and 3-column arrangements.

Besides, WPForms also gives lets you choose between Modern and Classic styles for radio field choices, which display images in slightly different styles.

#### Do images next to radio buttons affect accessibility?

Images accompanying radio buttons can affect accessibility if you ignore some considerations like color contrast between your background and images.

I recommend adding descriptive alt texts to your images and running a basic eyeball check to ensure the images are immediately visible with a high contrast.

If it takes you effort to see the image clearly, it’s a sign that you need more contrasting colors to ensure ideal accessibility.

### 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](http://www.wpbeginner.com/beginners-guide/make-money-online/), you can check out our tutorial on [how to create a simple order form in WordPress](https://wpforms.com/how-to-create-a-simple-order-form-in-wordpress/) and add images next to each item you have for sale.

[Build Your WordPress Form Now](https://wpforms.com/pricing/)

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** checkboxes, image choices, image next to radio button, radio button, survey reporting

---