Support Forum

Unfortunately, it is not possible within the features of JotForm.  Although it is possible with skills in programming using Jquery and javascript or tweak your JotForm and insert scripts such as below:

Here are some sample pages for Dropdown with images:

- DHTML Combobox
- Jquery enabled javascript image combo box (Demo here)

Here are fancy checkboxes in Jquery:

- Checkbox samples with JQuery (Demo page)
- Checkbox/Radio Button with JQuery  (Demo page)

One possible solution might be to have separate checkbox questions for each checkbox option, and then add an image near it using the Image field under Power Tools.

To put checkbox field and image side by side, right click on the image field and then select Shrink.

Both good answers. Glad to know programmers can modify the form. Thanks for the quick reponse and great tools!

The second option works very well for a limited number of items.

I think the first comment would be for the most ideal results.

It feels humiliating to correct myself on this, I tried some programming with jquery and the dropdown menu I have given example. Unfortunately, it had some conflicts with the javascript running the form.

But you can just insert a CSS code via CSS injection by editing your form then click the Setup & Share above the form, and click Preferences. Click the Form Styles tab and click the code next to the Inject Custom CSS, you can modify the class in it.  Or when embedding on the website, copy the source and edit it from there.

Thanks for following up on thi llyam. 

I am not a programmer but it sounds like I could host images elsewhere and add using code as an option to select from in a drop down list?

Thanks for any clarification.

Yes it's possible. You can upload your images somewhere else and use CSS to call the image to your form

Here's a code example of a CSS injected in JotForm:

.form-dropdown option {

background: url("http://www.innsys.ca/images/icon_check.png") no-repeat;
padding-left: 15px; }

This will result to something like this:
http://www.jotform.com/form/10585628631

If you wish to have each option to have a different image for each option, you can copy the source code and insert CSS style in each option tag

example original code:

<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>

example edited code:

<option style="background: url("http://www.domain.com/image1.jpg"); padding-left: 15px;" value="Option 1">Option 1</option>
<option style="background: url("http://www.domain.com/image2.jpg"); padding-left: 15px;" value="Option 2">Option 2</option>

Hope this helps