What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

  • Profile Image

    Add images to drop down and check list options

    Asked by otabo on February 24, 2011 at 01:04 AM

    I would like to add images to my drop down and check lists for people to select from.

    Is that possible? And or will it be?

    Thanks!

    drop down menu menu image
  • Profile Image
    JotForm Support

    Answered by liyam on February 24, 2011 at 07:33 AM

    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)

  • Profile Image
    JotForm Founder

    Answered by aytekin on February 24, 2011 at 07:38 AM

    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.

  • Profile Image

    Answered by otabo on February 24, 2011 at 07:09 PM

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

  • Profile Image

    Answered by otabo on February 24, 2011 at 11:31 PM

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

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

  • Profile Image
    JotForm Support

    Answered by liyam on February 25, 2011 at 03:39 AM

    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.

  • Profile Image

    Answered by otabo on February 27, 2011 at 09:00 PM

    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.

  • Profile Image
    JotForm Support

    Answered by liyam on February 28, 2011 at 01:24 AM

    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