Creating Checkbox Table

  • Profile Image
    Asked on February 28, 2016 at 11:50 PM
    Hi, I am using Jotform to create a PPE (Personal Protective Equipment) request form but i am having trouble.

    I would like to create a table with the description,

    quantity, and Size. With the description, i would like a checkbox next to the item that an employee wants to request, but I'm not sure how to do that. And so the user can choose what size they want. I would like to know how to make something similar to the attached photo.
    Where there's a checkbox next to description, quantity, and size.
  • Profile Image
    Answered on February 29, 2016 at 02:16 AM

    The Configurable List widget may prove useful for your form. It allows you to create a specific set of fields to display in the form.

    1. Add the widget to your form. You can add as many of this widget as required. Then to edit the fields, click the Wand icon.

    2. Input these values in the Fields configuration.

    Description : checkbox : Long Sleeve Shirt 

    Qty : text : 

    Size : text : 

    Click Save Changes when done.

    3. This is how your form would appear after.

    4. To add more fields, simply follow steps 1 and 2 again.

    Here's a link to a demo: 
    You can clone it to your account by following this guide: How to Clone an Existing Form from a URL

    Do let us know if you need further assistance.

  • Profile Image
    Answered on February 29, 2016 at 08:21 PM

    Thank you, that was helpful. But how can i add more fields under it (I know using + works) but it dupes Long Sleeve Shirt. How can i add Hard Hat and a lot of other different ones under it?


    Sorry, fairly new to jotform.

  • Profile Image
    Answered on February 29, 2016 at 09:44 PM

    You can simply add a new Configurable List widget to your form again. You can add as many of the widget as you need for your form. See the guide below on how to add new widgets. Then simply follow the steps 1 and 2 again from the previous guide.

    Hope this helps.

  • Profile Image
    Answered on February 29, 2016 at 09:54 PM

    It cant be something like this? all close together? I'd like it to identical to this except Change the Descriptions 

  • Profile Image
    Answered on February 29, 2016 at 11:19 PM

    Unfortunately, if you have different products, it is not possible to setup the widget the same as your screenshot. You can inject the css below to the Configurable List widget to make it appear more uniform.

    .checkbox, .radio {

    margin: 3px 10px;

    min-width: 70px;





    To inject the code, simply copy the css and follow the steps below:

    1. Click the Wand Icon on the widget

    2. Then select the Custom CSS tab, and paste (CTRL+V) the css to the area seen in the screenshot below.

    This is how the widgets would appear once you have applied the css to all of them.

    If you do not prefer the configurable list widget, a possible alternative would be to add a regular checkbox field and shrink it.

    Unfortunately, longer texts would disrupt the appearance of the fields. See this demo form to see an example: