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

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

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

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

  • Profile Image
    JotForm Support

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

    Answered by tctrust on December 10, 2016 at 05:05 PM

    Hello.

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

  • Profile Image
    JotForm Support

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

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

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

    Answered by tctrust 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
    JotForm Support

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

    Answered by tctrust on December 11, 2016 at 08:54 AM

    Hello,

    OK. But now not working conditions 1-8.

  • Profile Image
    JotForm Support

    Answered by Charlie 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.