Image Radio Buttons Widget: how do I make 2 categories of radio buttons?

  • fmquality
    Asked on February 12, 2018 at 6:05 PM

    I would like to make 2 categories of radio buttons so the client can only pick one option between the two groups. This is currently set up as 2 widgets. How can I set it up so its once widget with a small header to separate the groups?

    Jotform Thread 1382090 Screenshot
  • David JotForm Support Manager
    Replied on February 12, 2018 at 9:49 PM

    I have cloned your form, and managed to accomplish what you need by doing the following:

    1) Putting all images in one widget.

    2) Adding two extra images, with two extra image labels. 

    So this would be the URLs to put in the image box:

    https://cdn2.iconfinder.com/data/icons/at-the-office/100/mop-512.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/41452-200.png

    https://cdn2.iconfinder.com/data/icons/bathroom/100/bathroom-05-512.png

    http://www.pvhc.net/img89/ayskysguxgddmcnmgnjv.png

    https://cdn2.iconfinder.com/data/icons/game-center-mixed-icons/512/temperature.png

    http://www.pvhc.net/img19/ryuonnnyrvpcokhpfaob.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/456045-200.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/57788-200.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/57788-200.png

    https://cdn4.iconfinder.com/data/icons/sports-vol-3/48/111-512.png

    https://cdn3.iconfinder.com/data/icons/wsd-painting/512/painting-02-512.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/62829-200.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/57788-200.png

    http://www.pvhc.net/img22/bmgqrahfpzrruxfuquvl.png

    https://cdn2.iconfinder.com/data/icons/at-the-office/100/mop-512.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/41452-200.png

    http://www.pvhc.net/img89/ayskysguxgddmcnmgnjv.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/456045-200.png

    https://cdn2.iconfinder.com/data/icons/bathroom/100/bathroom-05-512.png

    https://cdn4.iconfinder.com/data/icons/construction-vol-1-1/48/21-512.png

    https://cdn2.iconfinder.com/data/icons/game-center-mixed-icons/512/temperature.png

    http://www.pvhc.net/img19/ryuonnnyrvpcokhpfaob.png

    https://d30y9cdsu7xlg0.cloudfront.net/png/57788-200.png

    And this would be the image labels to put in the widget:

    Custodial,Electrical, Plumbing, Key and Lock, Temperature, Waste Management, Pest Control, Other, Service Request:, Cart Reservation, Painting, New Furniture/Relocation, Maintenance Request:, Cabling, Custodial, Electrical, Key and Lock, Pest Control, Plumbing, Screens, Temperature, Waste Management, Other

    3) Finally, I created this custom CSS code to hide the extra images, and make the image labels look like "Category labels": https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    ul#images_button_container li:nth-of-type(9){

    display: block;

    width: 140px !important;

    }

    ul#images_button_container li:nth-of-type(13){

    display: block;

    width: 190px !important;

    }

    #_d8,#_d12{

        display: none;

    }

    #_l8 span{

        color: #555 !important;

        font-family: Lucida Grande, sans-serif  !important;

        font-weight: bold  !important;

        font-size: 17px  !important;

       margin-left: -33px;

    }

    #_l12 span{

        color: #555 !important;

        font-family: Lucida Grande, sans-serif  !important;

        font-weight: bold  !important;

        font-size: 17px  !important;

       margin-left: -36px;

    }

    label span{

        font-size: 12px !important;

    }

    This is the result: https://form.jotform.com/80427976126968 

    1518490076result Screenshot 10

    You may clone my form version if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

  • fmquality
    Replied on February 13, 2018 at 8:59 AM

    This worked great! Thank you!

  • David JotForm Support Manager
    Replied on February 13, 2018 at 10:10 AM

    You are welcome! :-)