WPForms Blog

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

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

by Shahzad Saeed on Nov 6, 2017

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.

src="http://example.com/wp-content/uploads/2017/10/basic-t-shirt.jpg"

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

Basic

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.

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.