Using a graphic as a radio button option?

  • Profile Image
    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
    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">

    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;}


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


    Example Form:


    Related Threads:

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

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