Image Radio Buttons widget: Ability to predefine or by default have a selected option

  • Profile Image
    tctrust
    Asked on December 10, 2016 at 12:55 PM

    There is possibility of establishing Predefined Options of Image Radio Buttons?

  • Profile Image
    Jim_R
    Answered on December 10, 2016 at 04:59 PM

    Just to confirm, are you referring to these:

    If so, you can change those images. Just change the URL of the images being used for the widget. Just refer to the instructions on the widget itself:

    As a quick example, I just used the same images for all 6 options:

    And here's how it looked like afterwards:

    If you need more guidance, refer to the help description found on the widget itself.

  • Profile Image
    tctrust
    Answered on December 10, 2016 at 05:05 PM

    Hello.

    NO, I need that the first position is active at the start.

  • Profile Image
    liyam
    Answered on December 10, 2016 at 11:30 PM

    Hello,

    Unfortunately, it is not possible to have the option selected by default using Image Radio Buttons widget. Let me escalate this matter to the development team and see if this can be added in the widget. However, I cannot guarantee that this can be approved and/or when can this be implemented. But as soon as we have updates, we'll inform you the soonest.

    Alternatively, you may consider using Radio buttons from the Form tools for now so that you can add images to the options directly using <img> tag.

    Thanks.

     

  • Profile Image
    tctrust
    Answered on December 11, 2016 at 05:06 AM

    OK, but using Radio buttons I have so

    There is possibility to approach the design and positioning of the image in Corporation of the button?

  • Profile Image
    Boris
    Answered on December 11, 2016 at 05:56 AM

    Yes, we can mimic the appearance of the Image Radio Buttons widget with a regular Radio Button field. All we need to do is inject some custom CSS into your form to customize the appearance.

    In order to customize the CSS to only affect this one field you want, we will need to get the ID of the Radio Button field where you use images as options:

    https://www.jotform.com/help/146-How-to-find-Field-IDs-Names

    On your last edited form, the ID is #id_190, so I would recommend injecting the following custom CSS:

    #id_190 .form-radio-item:not(#foo) label::before {
        background-color: black;
        border: 2px solid #828282;
        border-radius: 15px;
        width: 26px;
        height: 26px;
        top: 50%;
        left: 50%;
    }
    #id_190 .form-radio-item:not(#foo) label::after {
        background-color: white;
        width: 14px;
        height: 14px;
        top: 50%;
        left: 50%;
        margin: 6px;
    }

    It will result in a form looking like this:

    Please try it out, and let us know should you need further tweaks or assistance.

  • Profile Image
    tctrust
    Answered on December 11, 2016 at 06:56 AM

    But now not working conditions 1-8.

     

    I also need to focus with the button texts of values and increase the text of the title.

  • Profile Image
    liyam
    Answered on December 11, 2016 at 07:56 AM

    Hello,

    How about adding this CSS code into your form (in addition to the code you have inserted above):

    #label_190 {
        display: none;
    }

    #label_input_190_0, #label_input_190_1, #label_input_190_2, #label_input_190_3, #label_input_190_4, #label_input_190_5, #label_input_190_6, #label_input_190_7{
         text-align: center;
         padding-left: 25px;
         font-weight: bold;
    }

    #label_input_190_0 img, #label_input_190_1 img, #label_input_190_2 img, #label_input_190_3 img, #label_input_190_4 img, #label_input_190_5 img, #label_input_190_6 img, #label_input_190_7 img{
        margin-left: -10px;
    }

    If this doesn't work for you please let us know.

    Thanks.

  • Profile Image
    tctrust
    Answered on December 11, 2016 at 08:54 AM

    Hello,

    OK. But now not working conditions 1-8.

  • Profile Image
    Charlie
    Answered on December 11, 2016 at 09:24 AM

    Hi,

    It seems like you need to edit your conditions. Simply open and select the drop down options that are needed. If you open your conditions, you'll see that the "VALUE" is set to "Please Select" which means it is not properly setup:

     

    Here's a screencast of the issue:

     

    If you made a lot of changes in the radio button field's option list, then that might have caused this problem. Please do open the conditions and make sure that everything is still intact and hit the save button.

    Let us know if that works.