WPForms Blog

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

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

Last updated on Nov 7, 2017 by Shahzad Saeed

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, 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 button in WordPress forms.

Using an Image Next to a Checkbox or Radio Button

Step 1: Create a Simple WordPress Form

The first thing you need to do is to install and activate WPForms on your site. For more help, you can read how to install a WordPress plugin.

Next, you’ll need to have a form created. You can see our tutorial on creating a simple contact form in WPForms.

Step 2: Allow Users to Select an Image

Now, let’s add a Multiple Choice or Checkboxes field to your form to allow users to select an image.

place images next to radio buttons and checkboxes

Then, click on the field you just added in the form builder and enter the HTML for the image into the field text areas as shown in the screenshot.

image next to checkbox in form

Here’s the full text in our example:

<img style="width: 100px;" src="http://example.com/wp-content/uploads/2017/10/basic-t-shirt.jpg"> Basic

There are three elements you’ll want to change from the text above.

style="width: 100px;"

Customize the width of your image per your preference. You can even remove this element if you’ve resized the image already.


Replace the image’s file path with your own. You can find your image’s file path by opening the image in your site’s Media Library.

choose image in wordpress form


In our example, Basic is the text for the first choice. Feel free to change the text per your needs.

Keep in mind that depending on your theme’s styles, it may take some additional CSS to get the images lined up exactly the way you want.

You can read our guide on adding custom CSS to your WordPress forms.

That’s it!

We hope this guide helped you add an image next to radio button in WordPress forms.

Looking for inspiration to create a stunning contact form? Read 6 contact form designs you can steal with CSS.

What are you waiting for? Get started with the best WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.


  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 🙂

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.