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.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Highlight Selected Radio Button Image

    Asked by rallred21 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
    JotForm Support

    Answered by NeilVicente 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

    Answered by Yasush 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

    Answered by fxr 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

    Answered by Yasush on November 10, 2011 at 03:01 AM

    Thanks FXR