How to display images as options on the form?

  • tgaavsalon
    Asked on March 27, 2018 at 2:57 AM

    Hello,

    I have a suggestion for a change to a form element.

    I am using the quick element 'image choice' on some of my forms and would like to use an image only for people to select, so no 'options' text under the image.

    You can do this by simply not putting any text under the image, but this creates a problem on the excel form as you end up with no data in those fields.

    Would it be possible to alter the element so you can populate the 'options' field with text, but have it hidden if you wish. That way when a selection is chosen, it will show on the excel sheet but not on the form on screen itself.

    Kind regards,

    Ross Larsen

  • Kiran Support Team Lead
    Replied on March 27, 2018 at 8:40 AM

    I understand that you want to display images instead of text options on the form. We have a few widgets that might meet your requirements. Please take a look at the following widgets if that helps.

    https://widgets.jotform.com/widget/image_picker

    https://widgets.jotform.com/widget/image_choices

    https://widgets.jotform.com/widget/image_radio_buttons

    https://widgets.jotform.com/widget/image_checkboxes

    Let us know if you need any further assistance. We will be happy to help. 

  • tgaavsalon
    Replied on March 28, 2018 at 4:17 AM

    Thank you for your help but none of these solve the problem as they all suffer from the same issue, if you need text data in the excel or csv form, you have to type a description underneath the image.

    What I would like to do is have just an image on the form with no visible description underneath it.

    My suggestion is 'hidden' description text. That way when an image is selected, the hidden text will show on the excel or csv file instead of it being blank for that element.

    The images below might help explain:

    1522223758Image1 Screenshot 10

    If I have text under the images like the first image above, I will get data in my excel sheet.

    1522223859Image2 Screenshot 21

    If I have no text under the images like the second image above, I will get no data in my excel sheet.

    1522224236Image3 Screenshot 32

    The excel sheet above shows the results when the image selections are chosen.

    As you can see, if I have text under the images as per the first image I get results in my excel sheet, but if I remove the text as per the second image, I get blank fields in my excel sheet.

    What I want is to be able to have no text as per the second image, but still get data in my excel sheet as per what happens from the first image.

    My thought is that if I could still put a description in under the images, but then hide it from view, I will get the desired results, a question with no text, but will still get feedback results on my excel sheet instead of blank fields.

    Hope this all makes sense,

    Kind regards, Ross.

  • Kiran Support Team Lead
    Replied on March 28, 2018 at 5:33 AM

    You may hide the labels on the widget by injecting some CSS code. If you want to use Image Checkboxes or Image Radiobuttons widget, you may inject the following CSS code to the Custom CSS section of the widget to hide the labels below.

    li label {

    display: none;

    }

    But, the label values will be sent normally to the form submission and in Excel sheet. Please see the screenshot below:


    152222958128032018 1501594 Screenshot 10

    Thank you!

  • tgaavsalon
    Replied on March 28, 2018 at 6:24 AM

    Awesome, that looks like will work, I will give it a go.

    Thank you.

    Cheers, Ross.