Highlight Selected Radio Button Image

  • Profile Image
    rallred21
    Asked on September 04, 2011 at 04:32 PM

    Hello,

    I'm creating a form with Radio Buttons.  There are 24 options and Each option contains a thumbnail picture underneath the radio button.  I have 4 rows of 6 option buttons to make up the 24. 

    If the customer is not paying attention, it is very likely they will get confused when selecting an option, because they can click above or beneath the thumbnail picture.  There is not enough spacing between the rows to differentiate the options enough.

    Is it possible to bold or highlight the thumbnail that they've selected to confirm their choice and to eliminate the possibility of them selecting the incorrect option.

     

    Thank you!

  • Profile Image
    NeilVicente
    Answered on September 04, 2011 at 05:14 PM

    Hi,

    Does this sample form exemplify your goal?

    If yes, then please add this custom css on your form:

    input[type="radio"]:checked+label img  {
    padding:0px;
    border: 1px dashed red;
    }
    input[type="radio"]+label img {
    padding: 1px;
    }

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea

    You may modify the css border property to suit your preference. Please click here to learn more about border properties.

    Hope you find this post useful. Kindly send us a message if you have other issues that need attention.

    Thank you for using JotForm!


    Neil

  • Profile Image
    Yasush
    Answered on November 09, 2011 at 04:14 PM

    Hi Neil,

    Thanks for the effort, you guys at jot form taking the support to a whole new level.

    I was wondering if the form above can be created using jotform. Since I could not find an option to insert images

    images with radio button!

    I need to create a similar page for my product where upon chosing any option(image) the info changes.

    http://www.blurb.com/create/book/pricing#large-square

    Thanks

  • Profile Image
    fxr
    Answered on November 09, 2011 at 06:55 PM

    hi Yasush,

    There really isnt an easy way to create that effect with JotForm. 

    That webpage, uses anchors for the selections made by clicking on an image, then shows different forms depending on which item the user has selected. You probably could create a similar effect yourself using a set of different JotForms, but it would take a fair bit of work and decent knowledge of HTML/CSS & javascript. 

    The functionality itself really is way beyond the scope of JotForm at this present time. 

  • Profile Image
    Yasush
    Answered on November 10, 2011 at 03:01 AM

    Thanks FXR