Using images as checkbox or radio labels

In one of the samples, we have shown images as labels. To achieve this kind of result, you’d need to know/learn a little of HTML. This tutorial will attempt to show you, how we can put together images inside checkbox/radio element’s labels.

Images as labels

Uploading the images

Before we start, we are going to need hosted images. The easiest way to do this is using WordPress Media.

Using WordPress media

  • Go to WordPress Admin  Media  Add New.
  • Now simply drag and drop an image file like you’d do while creating posts.
  • Once the file is uploaded click on the “Edit” button (please see the screenshot) and note down the file URL.

Media File URL

For the image shown above, the URL is https://wpquark.com/kb/files/2013/10/Media-File-URL.png. Keep it handy.

Working with Form Elements

All of the fields of the form elements are HTML enabled. So this method will work anywhere. For the sake of simplicity, we are going to show this only for Radiobox and Checkbox elements (MCQ Single Option, MCQ Multiple Option).

  • Drag one of the form elements on a container.
  • Click on the settings icon of the new element.
  • Now start creating options (by clicking on the Add New Option button) and inside the Enter Option Label, enter HTML like this:
    <img src="http://wpquark.com/fsqm/files/2013/10/title-2.png" alt="Label 2" />
  • Obviously you’d need to change the src attribute value to the URL of the image you want to embed. For the URL above, the code would be:
    <img src="http://wpquark.com/fsqm/files/2013/10/title-2.png" alt="Label 2" />

Now save the form and preview it. You should see the image showing up in place of the label (beside the checkbox or radio element).

Swashata has written 257 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).