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 display fields of "Configuration List" widget in multiple rows?

    Asked by ivanjobros on March 10, 2017 at 03:10 AM

    I have form - https://eu.jotform.com/build/70672471023349/publish

    Me need create table how this screen -

     

    Page URL:
    https://form.jotformeu.com/70672471023349

    Screenshot
  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 10, 2017 at 09:14 AM

    Hello ivanjobros,

    If I understand your question correctly, you need to display the fields of "Configuration List" widget one below the other. Is that correct?

    Please inject the following custom css code in your "Configurable List" widget and that should solve your problem:

    #list > tbody > tr:first-child {

        display: none;

    }

     

    td.col2 {

        float: left;

        left: -211px;

        position: relative;

        top: 30px;

    }

     

    td.col3 {

        float: left;

        left: -211px;

        position: relative;

        top: 35px;

    }

    td.col4 {

        float: left;

        left: -211px;

        position: relative;

        top: 41px;

    }

    td.col5 {

        float: left;

        left: -211px;

        position: relative;

        top: 46px;

    }

    td.col6 {

        float: left;

        left: -211px;

        position: relative;

        top: 51px;

    }

    td.col7 {

        float: left;

        left: -211px;

        position: relative;

        top: 57px;

    }

     

    td.col8 {

        float: left;

        left: -211px;

        position: relative;

        top: 59px;

    }

    td.col9 {

        float: left;

        left: -207px;

        position: relative;

        top: 58px;

    }

    tr {

        height: 250px !important;

    }

    button.add {

        margin-top: 9px;

    }

    Please check the screenshot below on how to inject custom css code in widget:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by ivanjobros on March 10, 2017 at 09:30 AM

    I'am used you css code, and my form - 

     

    Where is name input string?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 10, 2017 at 12:26 PM

    Hello ivanjobros,

    Since adding new row in "Configurable List" widget does not duplicate the question label, that is the reason why I have kept the label hidden. 

    The best option I would suggest is to add the hint text in all text fields of configuration list widget.

    Thank you!

  • Profile Image

    Answered by ivanjobros on March 13, 2017 at 02:15 AM

    Add the hint text in all text fields - not good, but normal variant.

    But need creat:

    -label- -input-

    -label- -input-

    -label- -input-

    ......

     

    Or how add hint text in text fields in "Configurable List" ?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 13, 2017 at 04:36 AM

    Hello,

    I did check your form and found that you have add number field instead of text field. If you add a text field, you should be able to add hint text:

    You should add text field in the follwoing order: Общая площадь:text : Общая площадь

    After the "text:" anything you add will be displayed as hint text. You may like to take a look at the following guide which should help you how to configure configurable list widget:  https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

    Please take a look at the following cloned form where I have made the required changes and it displays the hint text correctly:  https://form.jotform.com/70685041780962

    Feel free to clone this form for a closer look. The following guide should help you in form cloning:  https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Hope this helps.

    Do get back to us if you need any changes.

    Thank you!