Using a graphic as a radio button option?

  • Profile Image
    grassmedia
    Asked on December 01, 2013 at 02:52 AM

    I've been using Jotform for a few years and have rarely found anything it couldn't do; either in the standard functions or by injecting css or using an app but this time I think I may have hit the buffers!

    What I need to be able to do is to use a radio button but instead of having the option1, 2, 3 etc appear, I need it to be a graphic instead - think of it like a favorite colour picker kind of thing...

    If anyone has any ideas, I'm all ears!

  • Profile Image
    Cesar
    Answered on December 01, 2013 at 03:57 AM

    To add images to the radio buttons have the radio fields selected and go to the options icon on the top toolbar, you can then add an <img> tag per line, thus defining an image per radio button, like so:

    Code to use (<img> tag):

    <img alt="" src="your image source URL" style="width:140px; height:140px; " align="absmiddle"><img alt="" src="your image2 source URL" style="width:140px; height:140px; " align="absmiddle">

    https://cms.jotform.com/uploads/image_upload/image_upload/global/21683_hideradio2.png

    You can remove the radio button injecting CSS code and adding the image this way as well

    Hiding the first two radio buttons using the following code:

    #input_1_0, #input_1_1 {
    visibility: hidden;}

    https://cms.jotform.com/uploads/image_upload/image_upload/global/21683_hideradio2.png

     

    If you do need further assistance, do let us know. Thank you.

     

    Example Form:

    http://form.jotform.co/form/33340724370851?

     

    Related Threads:

    https://www.jotform.com/answers/246720-Add-image-in-Radio-Checkbox-options

    https://www.jotform.com/answers/139420-Images-instead-of-text-on-radio-buttons

  • Profile Image
    grassmedia
    Answered on December 01, 2013 at 06:33 AM

    Fantastic!  Thank you so much for your rapid help, just what I needed!