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 a configurable list wrap on my form so that it fits the screen when viewed?

    Asked by blossomwithmaggie on June 09, 2017 at 10:19 AM

    In my form Bridal Hair and Makeup Questionnaire I have a configurable list that I would like to wrap so that it doesn't run off the page. Is that possible?

    Page URL:
    https://www.jotform.com/build/70265466317155

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 09, 2017 at 12:28 PM

    It is possible to split the fields into two rows, with custom CSS. If you are familiar with CSS you can do it yourself. Here are some threads, where you can see how this can be done: 

    https://www.jotform.com/answers/595103 

    https://www.jotform.com/answers/678723 

    We can also provide you the CSS code. Just tell us how would you like to split the fields. For example we can move all checkbox field to new row. 

    Let us know if you need further assistance. 

  • Profile Image

    Answered by blossomwithmaggie on June 09, 2017 at 01:43 PM
    I'm not super familiar with css. Could you split it at the check boxes for me please? I really appreciate it!
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • Profile Image
    JotForm Support

    Answered by BJoanna on June 09, 2017 at 02:38 PM

    Will this work for you? 

    If so, add this CSS code to Custom CSS field of your Configurable list widget:

    tr {

     display: block;

    }

    th {

       display: none;

    }

    td.col1:before {

      content:"Name";

      display: block;

    }

    td.col2:before {

     content:"Role in Wedding";

     display: block;

    }

    td.col3:before {

       content:"Hair Length";

       display: block;

    }

    td.col4:before {

     content:"Hair Type";

     display: block;

    }

    td.col5:before {

     content:"Updo or 1/2 Updo";

     display: block;

    }

    td.col6:before {

     content:"Vintage Style";

     display: block;

    }

    td.col7:before {

     content:"Thermal Style (no pins)";

     display: block;

    }

    td.col8:before {

     content:"Blow Out (no pins)";

     display: block;

    }

    td.col9:before {

     content:"Makeup";

     display: block;

    }

    td.col10:before {

     content:"Lashes";

     display: block;

    }

    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-bottom:10px;

    padding-right:15px;

    }

     td.col6, td.col7, td.col8, td.col9, td.col10 {

    display: inline-block;

    float: left;

    padding-right :15px!important;

    }

    Here is my demo form: https://form.jotformpro.com/71595545987981 

    Feel free to clone it

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by blossomwithmaggie on June 09, 2017 at 06:43 PM
    Perfect! Thank you!!!
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • Profile Image

    Answered by blossomwithmaggie on June 12, 2017 at 11:43 AM
    Thank you for your help. I inserted the coding you gave me below. I'd like it to split the two lines with the drop downs on line one and the check boxes on line two. Can you help me with that modification? This is what mine looks like after the code you gave me.
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • Profile Image
    JotForm Support

    Answered by BJoanna on June 12, 2017 at 12:53 PM

    I have inspected your form and configurable list on your form, looks exactly the same as configurable list on my form and on a screenshot I provided.

    Your screenshot is not shown here on forum. Please note that images that are attached inside of email will not be shown here on forum. You will have to open this thread and upload your screenshot

  • Profile Image

    Answered by blossomwithmaggie on June 12, 2017 at 01:43 PM
    Hmm, when I published and looked at it it didn't appear that way. Ok, thank you. I'll look at it again.
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • Profile Image
    JotForm Support

    Answered by BJoanna on June 12, 2017 at 02:15 PM

    Please check it again and let us know if there is an issue on your form.

    Please note that your form is responsive and if the width of the form is changed, for example form is viewed on mobile device, fields inside of configurable list will adjust and some of them will be moved to new row, so that all can be shown on the form.