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

    Can you assist me in breaking my configurable list down into two rows please?

    Asked by goodtimegetaways on May 27, 2016 at 03:15 PM

    I've seen it done but am not programming savvy. Can you point out the part of the code that I need to copy from other forms that will allow me to create a second row of field information in my configurable list widget please? 

    Thank you!

    https://form.jotform.com/61474191761963

    Page URL:
    https://form.jotform.com/61474191761963

    Screenshot
    configurable list two rows set up in two rows
  • Profile Image
    JotForm Support

    Answered by KadeJM on May 27, 2016 at 03:44 PM

    To my understanding you are using the configurable list widget and would like to set it up to display in two rows.

    We've actually got a guide which will help walk you through setting it up and customizing it.

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

  • Profile Image

    Answered by goodtimegetaways on May 28, 2016 at 12:36 PM

    I have reviewed that link and it doesn't cover how to create two rows in the configurable list. It only shows how to create multiple columns on one row. 

  • Profile Image
    JotForm Support

    Answered by Welvin on May 28, 2016 at 02:30 PM

    If you need it to be like this: https://form.jotform.com/61485984686981. Inject the following custom CSS codes to the CSS box of the widget:

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

    display: inline-block;

    float: left;

    padding: 20px 5px 1px 1px;

    }

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

    width: 19%; 

    }

    td.col11 { 

    position: relative; 

    top: 18px;

    }

     


    Let us know if you need any further assistance.