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

    Configurable List Widget: How to create new lines with CSS Codes?

    Asked by TaylorBeaumont on December 05, 2016 at 06:32 AM

    G'day Jotfrom Wizards,

    I recently made the jump from Google Forms and am loving Jotform. I'm kicking myself for not finding it sooner.

    I have created a configurable list, and I want each section to be on a new line. What CSS do I need for that?

    You can find my form here: https://form.jotform.co/63393072713859

    I also want the days (radio buttons) to appear horizontally in the form. 

    Thank you in advance!

    Taylor.

    Page URL:
    https://form.jotform.co/63393072713859

  • Profile Image
    JotForm Support

    Answered by candy on December 05, 2016 at 07:10 AM

    Hello Taylor,

    I have checked your form and cloned it in order to test it on my side.

    The "Configurable List" widget has been created as an HTML table. Unfortunately, you can not change this feature with CSS codes.

    If you want, you can use normal form fields for the same form instead of a configurable list widget as the following screenshot:

    Please check. If you need further assistance, do not hesitate to contact us.

    Thank you.

  • Profile Image

    Answered by TaylorBeaumont on December 05, 2016 at 06:21 PM

    Hey Candy, thank you for the quick response!

     

    Which part of what I want is not achievable with the Configurable List?

     

    Also, I could do it that way, but I would need each of those sections repeatable, because often clients have more than 1 special. Is there a way to make that section repeatable when they're filling in the form?


    Cheers!

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 06, 2016 at 01:33 AM

     

    Do you want to achieve something like this?

    If so, please add this CSS code to Configurable list CSS field:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    tr {

         height: 380px!important;

    }

    #list > tbody > tr:first-child {

        display: none;

    }

    td.col1:before {

         content: "Special Information";

         display: block;

    }

    td.col2:before {

         content: "Start ";

         display: block;

    }

    td.col3:before {

         content: "Finish ";

    display: block;

    }

    td.col4:before {

         content: "Days Available";

         display: block;

    }

    .col2 {

    float: left!important; 

        top: 70px!important;

        left:-150px!important;

    position: relative;

    }

    .col3 {

        left: -375px!important;

    float: right;

        top:120px!important;

    position: relative;

    }

    .col4 {

        left: -280px!important;

        top: 180px!important;

    position: relative;

    float: left!important;

    }

    Here is my demo form: https://form.jotform.com/63400409880958 

    Feel free to clone it.

     

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