-
fmqualityAsked 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?
-
David JotForm Support ManagerReplied 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
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
-
fmqualityReplied on February 13, 2018 at 8:59 AM
This worked great! Thank you!
-
David JotForm Support ManagerReplied on February 13, 2018 at 10:10 AM
You are welcome! :-)