How to create a configurable list with checkboxes, text and spinners

  • nele
    Asked on November 24, 2015 at 3:47 PM

    Hi,

    I'm trying to create a configurable list that has checkboxes on the left (a different value (fooditem) for each checkbox), text in the middle that says "number of persons" or "number of liters" or "number of pieces" and a spinner on the right to select the number of persons/liters/pieces.

    Ex.
    Sushi          Number of persons: 2
    Soup           Number of liters: 1
    Eggs            Number of pieces: 3

    I've tried to make this with configurable list and with the items check box and spinner separately (shrunken),
    but I can't get it right...

    Thanks for your help!

  • jonathan
    Replied on November 24, 2015 at 5:51 PM

    You can follow the user guide on how to here

    user guide: -How-to-Set-Up-the-Configurable-List-Widget

    Let us know if you encounter any difficulty following the guide.

    Regards

  • nele
    Replied on November 25, 2015 at 1:16 PM

    I already read that (together with other posts on the forum) before I posted my question.

    This is what I get:

    How to create a configurable list with checkboxes, text and spinners Image 1 Screenshot 20

    All checkboxes and static text have to be different values, and I can't get that right.

    And I can't get a spinner at the end (in the picture it's just a dropbox).

     

    Can you help me?

     

     

     

  • jonathan
    Replied on November 25, 2015 at 4:10 PM

    Thank you for explaining it more. Now I understand what you wanted to create.

    Unfortunately the Configurable List widget will not work that way.

    I think what you wanted to have was more like the Matrix Table field but with different type of input field. The Matrix table field can only have one input type but it can have multiple columns and multiple rows. Similar also is the Data Grid widget, but the Data Grid doesn't uses input field. It only shows the static data in a grid type view.

    All checkboxes and static tekst have to be different values,

    How about if you just use multiple Configurable List widget. What will happen is you will multiple Configurable List widget in multiple rows, but each widget will have different intial values.

    Something like this

    How to create a configurable list with checkboxes, text and spinners Image 1 Screenshot 20

     

    Hope this help. Let us know if there is more we can help you with.

  • nele
    Replied on November 26, 2015 at 2:03 PM

    Hi,

    Thanks for your answer.

    I've tried it and it looks quite okay, except for 2 things:

    - There is too much spacing between the lines
    - What about validation?
       I want it to be required that at least one of the 5 checkboxes is checked.
      But when it's all separate fields, I can only choose whether that specific field is required or not, which is of course not the intention with an order form with different possibilities (4 different appetizers, 3 different main courses, etc)

    In addition to that the asterisk that stands for required should not stand next to every row (see the 4th row of the example)

    This is what I've got so far:
    (the form is in Dutch, because that's my native language)

    How to create a configurable list with checkboxes, text and spinners Image 1 Screenshot 20

     

    Can anyone help fix this?

  • David JotForm Support Manager
    Replied on November 26, 2015 at 2:39 PM

    On regards of the spacing, please inject the following CSS code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #id_57,#id_89,#id_90,#id_91,#id_92,#id_93,#id_94,#id_95,#id_96,#id_97,#id_98,#id_99,#id_100,#id_101,#id_102,#id_103,#id_104,#id_105{

        margin-bottom: 0px !important;

        margin-top: 0px !important;

        padding-bottom: 0px !important;

        padding-top: 0px !important;

    }

    How to create a configurable list with checkboxes, text and spinners Image 1 Screenshot 20

    On regards of the requiring, let me think a way around this, I'll get back to you as soon as I figure something out.

  • David JotForm Support Manager
    Replied on November 26, 2015 at 3:40 PM

    Hi again, some IDs were missing on that code I provided, her is the right one:

    #id_56,#id_57,#id_89,#id_90,#id_91,#id_92,#id_93,#id_94,#id_95,#id_96,#id_97,#id_98,#id_99,#id_100,#id_101,#id_102,#id_103,#id_104,#id_105,#id_106{

        margin-bottom: 0px !important;

        margin-top: 0px !important;

        padding-bottom: 0px !important;

        padding-top: 0px !important;

    }

    Here is my cloned version: https://form.jotform.com/53295923008962?

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

     

  • nele
    Replied on November 26, 2015 at 3:42 PM

    Hi,

    Thanks for your help concerning the spacing! It already looks a lot better.

    Let me know if you figure something out concerning the requiring.


    In the meanwhile I have another question concerning the order list:
    Is it possible to configurate the email notifier in such a way that only the dishes that are selected (and the number that is chosen) will be shown in the email that is send to me? This is easier for a quick overview of the order without having to search through the dishes that are not selected
    .
  • David JotForm Support Manager
    Replied on November 26, 2015 at 3:44 PM

    Your new concern will be addressed here: http://www.jotform.com/answers/712662

     

  • David JotForm Support Manager
    Replied on November 26, 2015 at 4:53 PM

    Hi, here is my workaround:

    1) Please add a Text field, where you let the user know the field is required, and position the Text field next to the label with this custom CSS: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #id_108{

        margin-left: 120px;

        margin-bottom: -60px;

    }

    How to create a configurable list with checkboxes, text and spinners Image 1 Screenshot 40

    2) Add a Text Box field a the bellow all the Configurable List widgets:

    How to create a configurable list with checkboxes, text and spinners Image 2 Screenshot 51

    Then hide it with the CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #id_109{

    display: none;

    }

    3) Create two conditions:

    -One to show the warning Text field if all the Configurable List Widgets are empty: http://www.jotform.com/help/316-How-to-show-or-hide-a-field-in-the-form-based-on-the-other-field-input-or-selection

    -The other two required the Texbox field (which is hidden now), if all the configurable List widgets are empty: http://www.jotform.com/help/57-Smart-Forms-Using-Conditional-Logic

    Example:

    How to create a configurable list with checkboxes, text and spinners Image 3 Screenshot 62

    You can test my cloned version here: https://form.jotform.com/53295923008962?

    And if you like it, you can clone it: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Hope this helps, if you need anything else please open a new thread, we will be glad to assist you.

     

  • nele
    Replied on November 27, 2015 at 4:29 PM

    Hi,

     

    Thank you very much for your solution!!!

    I think my form is ready to be used now :-)

    Thanks again and have a nice weekend!

  • jonathan
    Replied on November 27, 2015 at 4:40 PM

    On behalf of David, you are quite welcome! :)

    Feel free to contact us again anytime should you require assistance on JotForm.

    Cheers

  • nele
    Replied on November 27, 2015 at 5:27 PM

    Hi,

    Sorry to have to bother you again...

    I've just added the form to my website, but when I test it,
    I get this result for the part where the order should be in the email:

    How to create a configurable list with checkboxes, text and spinners Image 1 Screenshot 20
    I intended that the email should show me:

    "Mini krabschelpjes Aantal personen 2"
    "Mini quiche lorraine Aantal stuks 2"

    and not the text in between...


    In addition to this the customer who fills in the form should also have to indicate for how many people (or how many pieces or how many liters). In the example above I was able to post the form without filling in the number of pieces with the dish "mini quiche Lorraine".


    Can you help me with this?

  • Kevin Support Team Lead
    Replied on November 27, 2015 at 5:48 PM

    Hi,

    To assist you better, I've moved your questions to these threads: 

    http://www.jotform.com/answers/713248

    http://www.jotform.com/answers/713251

    I will answer there.

    Thanks.