What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by nele on November 24, 2015 at 03: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!

    checkboxes create configurable list
  • Profile Image
    JotForm Support

    Answered by jonathan on November 24, 2015 at 05: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

  • Profile Image

    Answered by nele on November 25, 2015 at 01:16 PM

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

    This is what I get:

    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?

     

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 25, 2015 at 04: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

     

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

  • Profile Image

    Answered by nele on November 26, 2015 at 02: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)

     

    Can anyone help fix this?

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 26, 2015 at 02: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;

    }

    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.

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 26, 2015 at 03: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

     

  • Profile Image

    Answered by nele on November 26, 2015 at 03: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
    .
  • Profile Image
    JotForm Support

    Answered by BDAVID on November 26, 2015 at 03:44 PM

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

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 26, 2015 at 04: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;

    }

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

    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:

    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.

     

  • Profile Image

    Answered by nele on November 27, 2015 at 04: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!

  • Profile Image
    JotForm Support

    Answered by jonathan on November 27, 2015 at 04:40 PM

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

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

    Cheers

  • Profile Image

    Answered by nele on November 27, 2015 at 05: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:


    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?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on November 27, 2015 at 05: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.