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

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

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

  • Support_Management Jotform Support
    Replied on December 10, 2016 at 4:59 PM

    Just to confirm, are you referring to these:

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

    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:

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

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

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

    And here's how it looked like afterwards:

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

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

  • tctrust
    Replied on December 10, 2016 at 5:05 PM

    Hello.

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

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

  • liyam
    Replied 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.

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

    Thanks.

     

  • tctrust
    Replied on December 11, 2016 at 5:06 AM

    OK, but using Radio buttons I have so

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

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

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

  • Boris
    Replied on December 11, 2016 at 5: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:

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

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

  • tctrust
    Replied on December 11, 2016 at 6:56 AM

    But now not working conditions 1-8.

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

     

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

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

  • liyam
    Replied on December 11, 2016 at 7: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.

  • tctrust
    Replied on December 11, 2016 at 8:54 AM

    Hello,

    OK. But now not working conditions 1-8.

  • Charlie
    Replied on December 11, 2016 at 9: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:

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

     

    Here's a screencast of the issue:

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

     

    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.