Using image checkbox inputs
This page introduces checkbox images and shows you how to set up your own image checkbox input.
Adding input to your form
To add image checkbox to your form open the side panel by clicking the Add element button and then selecting Image checkbox.
Using the bootstrap grid system
Image checkboxes are displayed using bootstrap grid system. The way it works is you specify the size of device (large, medium, small) and then you specify the number of columns you want to be displayed in a row on device of that size. Once device size gets smaller than the specified target size bootstrap will display all images in one column. Finding a target size can be a little tricky and will depend on the number of checkboxes you have and their sizes. One thing you should do is hide the site settings panel so that your inputs are displayed in full width.
You should note that “Bootstrap col number” doesn’t specify the number of columns but the number in the bootstrap’s col class (i. e. col-md-4). To get the actual number of columns you need to divide twelve by the col number. For example for col number 4 you would get 12 / 4 = 3 columns.
Using key-value pairs
The key-value pair is similar to key-value pairs used in regular checkbox inputs but offers you additional functionality. You should specify a key and a value the value will be displayed in results just like it is with a regular checkbox input.
To see additional functionality click on the chevron on the right side of the key-value pair.
You can specify image url by typing or picking one from your site, you can provide popup text or html and modify checkbox size.
If you want to pick image from your site’s folder click on the image icon next to the image url to see image picker. Navigate your site’s folder structure to locate desired image and then click on that image.
To close the panel with additional functionality click on the chevron area again.
You are now ready to use image checkbox input.