Creating Checkbox Table

  • charlielindenberg
    Asked on February 28, 2016 at 11:50 PM

    Hi, I am using Jotform to create a PPE 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.

     

    Thanks.

    Charlie

    Jotform Thread 783328 Screenshot
  • Chriistian Jotform Support
    Replied on February 29, 2016 at 2: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.

    http://widgets.jotform.com/widget/configurable_list

    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.

    Creating Checkbox Table Image 1 Screenshot 40

    2. Input these values in the Fields configuration.

    Description : checkbox : Long Sleeve Shirt 

    Qty : text : 

    Size : text : 

    Click Save Changes when done.

    Creating Checkbox Table Image 2 Screenshot 51

    3. This is how your form would appear after.

    Creating Checkbox Table Image 3 Screenshot 62

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

    Here's a link to a demo: https://form.jotform.com/60591295934969 
    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.

  • charlielindenberg
    Replied on February 29, 2016 at 8: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.

  • Chriistian Jotform Support
    Replied on February 29, 2016 at 9: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.

    Creating Checkbox Table Image 1 Screenshot 20

    Hope this helps.
    Regards.

  • charlielindenberg
    Replied on February 29, 2016 at 9:54 PM

    Creating Checkbox Table Image 1 Screenshot 20

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

  • Chriistian Jotform Support
    Replied 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;

    }

    .checkbox-container{

    width:250px;

    }

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

    1. Click the Wand Icon on the widget

    Creating Checkbox Table Image 1 Screenshot 50

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

    Creating Checkbox Table Image 2 Screenshot 61

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

    Creating Checkbox Table Image 3 Screenshot 72

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

    Creating Checkbox Table Image 4 Screenshot 83

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