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 do I start a new row on Configurable List, so I have 6 rows already set?

    Asked by wdbos on February 05, 2017 at 07:45 AM

    I want to have the following 2 fields over 6 rows

     

    Section                                        Number of Participants

    check box with Tinies title             Number box

    check box with Subbies title          Number box

    check box with Juniors title           Number box

    check box with Inters title             Number box

    check box with Seniors title           Number box

    check box with Masters title          Number box

     

  • Profile Image
    JotForm Support

    Answered by Jan on February 05, 2017 at 01:06 PM

    It is possible to set a number of rows by default in the Configurable List widget. Here's how:

    Select the Configurable List widget and then click the "Widget Settings" button. The widget wizard will appear, scroll down and you'll see the "Minimal rows number" option. Put "6" in the field and then click the "Update Widget" button.

    Related guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

    Hope that helps. Thank you.

  • Profile Image

    Answered by wdbos on February 05, 2017 at 07:08 PM

    Thank you I now have 6 rows,  but I'd like to have each row with a different checkbox title NOT the same title.  How do I change this?

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 06, 2017 at 12:16 AM

    Thank you for the clarification. For your requirement, you will need to setup all the checkbox and number box in the configurable list, so it will first appear in one row as seen below:

    Then we can provide custom CSS code to have each checbox and number box into separate rows. Since this will require customization, you will need to first setup the boxes and number fields with all the appropriate checkbox titles. Let us know on this thread once you have done so and we will provide the appropriate code after.

    You can check out this guide for more info: How to Set Up the Configurable List Widget

    I will wait for your response.
    Regards.

     

  • Profile Image

    Answered by wdbos on February 06, 2017 at 12:20 AM

    Ok.  Yes I have set up all the fields I require.

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 06, 2017 at 01:37 AM

    Hi,

    If you are done to set up all the fields you require, we can now proceed to your form customization. Please allow me some time to work on this. I'll get back once I'm done.

    Regards

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 06, 2017 at 02:58 AM

    Hi again,

    Please follow the instructions below to achieve this:

    1. From the Widget Settings, set the Minimal Rows Number into 1. Also set the Maximal Rows Number into 1 to get rid of the "+" sign below.

    2. Set the width of the widget to 600.

     

    3. Inject this custom CSS in the widget.

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

     

    th { display: none; }

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10, td.col11, td.col12, td.col13 {

    display:inline-block;

    float: left;

    padding: 20px 10px 1px 1px;

    }

    input[type="text"], select, .stepper-wrap input.stepper { width: 100%; }

    td.col1:before { content: "Section "; width: 50%; }

    td.col2:before { content: "Number of Participants "; width: 40%; }

    td.col3:before { content: "Section  "; width: 50%; clear: left; }

    td.col4:before { content: "Number of Participants "; width: 40%; }

    td.col5:before { content: "Section  "; width: 50%; }

    td.col6:before { content: "Number of Participants  "; width: 40%; }

    td.col7:before { content:" Section  "; width: 50%; clear: left; }

    td.col8:before { content: "Number of Participants "; width: 40%; }

    td.col9:before { content: "Section "; width: 50%; clear: left; }

    td.col10:before { content: "Number of Participants "; width: 40%; }

    td.col11:before { content: "Section  "; width: 50%; clear: left;}

    td.col12:before { content: "Number of Participants "; width: 40%; }

    td.col13:before { content: "Section "; width: 50%; clear: left; }

     

    td.col1 { width: 50%; }

    td.col2 { width: 40%; }

    td.col3 { width: 50%;  clear: left;}

    td.col4 { width: 40%; }

    td.col5 { width: 50%; }

    td.col6 { width: 40%;}

    td.col7 { width: 50%; clear: left;}

    td.col8 { width: 40%; }

    td.col9 { width: 50%; clear: left;}

    td.col10 { width: 40%; }

    td.col11 { width: 50%; clear: left;}

    td.col12 { width: 40%; }

    td.col13 { width: 50%; clear: left;}

     

     

     

    Result:

     

     

    Let us know if you need furthter assistance.
    Regards

  • Profile Image

    Answered by wdbos on February 06, 2017 at 10:51 AM

    Thank you for your responses.  I have set up the configurable list like I wanted, however, I now have three issues. 

    1.  When I go to preview the form, the titles (Section and Number of Participants) don't show up.  I also had to change the please select to just select, as the drop down number box shortens when in preview mode.

    2. 

    When sending/receiving a submission, the data in the configurable list doesn't show up clearly or cuts off in a PDF document.  It would be better if the PDF document was in landscape.

    3. 

    The email response doesn't show clearly and stretches too wide across the screen, due to the configurable list data.

     

    Can you help me with any of these issues?

    Thanks

  • Profile Image
    JotForm Support

    Answered by Jan on February 06, 2017 at 12:29 PM

    I was able to replicate the issue. The titles are not showing in the preview or live form. Please give me more time to investigate about this issue. I will contact you once I have a solution.

    I created a separate thread for your PDF issue and email issue. Please wait for our reply to these threads:

    https://www.jotform.com/answers/1057933
    https://www.jotform.com/answers/1057936

    Thank you for understanding.

  • Profile Image
    JotForm Support

    Answered by Jan on February 06, 2017 at 08:40 PM

    Thank you for patiently waiting. Please try the following steps:

    1. Please try going back to JotForm V3 by clicking the "Switch to JotForm V3" button at the top left.

    2. In the Form Builder V3, select the Configurable List widget and then click the wand icon.

    3. Go the "Custom CSS" tab and paste the same CSS code provided by Christian above. Click the "Update Widget" button when you're done.

     

    4. Save and the form and verify the changes.

    5. You can now go back to Form Builder V4 by changing the settings in My Account Settings page.

    Hope that helps. Thank you.

  • Profile Image

    Answered by wdbos on February 07, 2017 at 10:00 PM

    ok, now the configurable list has messed up!  I tried doing what Jan said in the last thread.  I don't know what version I was working with, but couldn't work out how to go back to JotForm V3, so just opened JotForm4.0 and then edited in my account settings.  The CCS code I re-pasted from Christian is now not working.  Please help. 

    Also the images don't show up on Jan's last thread post. Below are images of the original version I was using, then the other one I opened up in after that.

     

  • Profile Image

    Answered by wdbos on February 07, 2017 at 10:06 PM

    FYI I'm working on a Surface Pro 4

  • Profile Image

    Answered by wdbos on February 07, 2017 at 10:22 PM

    Another question related to the configurable list is......

     

    Can I add a hover box that gives instructions on what should be completed for this form element, like I can for other elements?

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 08, 2017 at 12:13 AM

    Can I add a hover box that gives instructions on what should be completed for this form element, like I can for other elements?

    Unfortunately it is not possible to add a hover box into the configurable list. A possible alternative would be to add a hint text for your textboxes by adding  another colon and entering the hint that you want to display. Here's an example (Text Area : textarea : Hint Text).

    With regards to your issue with the configurable list, please allow me some time to investigate this further. I will get back to you once I am done checking.
    Thank you.

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 08, 2017 at 12:32 AM

    Hello again,

    To resolve the issue, please remove all the CSS in the Configurable List widget and replace it with the one that I updated below:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    th { display: none; }

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10, td.col11, td.col12, td.col13 {

    display:inline-block;

    float: left;

    padding: 20px 10px 1px 1px;

    }

    input[type="text"], select, .stepper-wrap input.stepper { width: 100%; }

    td.col1:before { content: "Section "; width: 20%; }

    td.col2:before { content: "Number of Participants "; width: 30%; }

    td.col3:before { content: "Section  "; width: 20%; clear: left; }

    td.col4:before { content: "Number of Participants "; width: 30%; }

    td.col5:before { content: "Section  "; width: 20%; }

    td.col6:before { content: "Number of Participants  "; width: 30%; }

    td.col7:before { content:" Section  "; width: 20%; clear: left; }

    td.col8:before { content: "Number of Participants "; width: 30%; }

    td.col9:before { content: "Section "; width: 20%; clear: left; }

    td.col10:before { content: "Number of Participants "; width: 30%; }

    td.col11:before { content: "Section  "; width: 20%; clear: left;}

    td.col12:before { content: "Number of Participants "; width: 30%; }

    td.col13:before { content: "Section "; width: 20%; clear: left; }

     

    td.col1 { width: 20%; }

    td.col2 { width: 30%; margin-right: 33% }

    td.col3 { width: 20%;  clear: left;}

    td.col4 { width: 30%; margin-right: 33%  }

    td.col5 { width: 20%; }

    td.col6 {  width: 30%; margin-right: 33% }

    td.col7 { width: 20%; clear: left;}

    td.col8 {  width: 30%; margin-right: 33%  }

    td.col9 { width: 20%; clear: left;}

    td.col10 {  width: 30%; margin-right: 33%  }

    td.col11 { width:20%; clear: left;}

    td.col12 {  width: 30%; margin-right: 33%  }

    td.col13 { width: 20%; clear: left;}

     

    Here's the result:

    Please note that some of the fields may appear skewed on preview, but if you view the form using the direct link, all the fields should be aligned. Here's an example: https://form.jotform.com/70380252754959 

    Regards.

  • Profile Image

    Answered by wdbos on February 08, 2017 at 12:56 PM

    Still not working.  This is how it looks now.  I tried previewing it in different ways and still the same.  Tried changing versions and clicking on the direct link too.

  • Profile Image
    JotForm Support

    Answered by Jan on February 08, 2017 at 02:14 PM

    Please give me more time to work on this issue. I will contact you once I have a solution. Thank you.

  • Profile Image
    JotForm Support

    Answered by Jan on February 08, 2017 at 06:38 PM

    Thank you for waiting. It seems that the CSS code above doesn't have a semi-colon ";" at the end of some declaration. However, the demo form above is showing the headers properly.

    I would recommend you to just clone the form created by my colleague Christian. Here's the link: https://form.jotform.com/70380252754959.

    Here's a guide on How-to-Clone-an-Existing-Form-from-a-URL.

    Hope that works. If you need further assistance, let us know.