WordPress Tutorials, Tips, and Resources to Help Grow Your Business
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
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.
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.
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.
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.
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.
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.