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 format configurable list widget?

    Asked by etiennekh on April 22, 2016 at 11:02 AM

    I need to format configurable list into 2 lanes: 

     

    First lane:

    label: Target Protein/Gene/Locus - answer: dropdown list (LDLR Deficiency Null HoFH, LDLR Deficiency Non Null HoFH, Compound Null/Non Null LDLR and/or APOB)

    label: Total N - answer: number

    label: N < 18y. - answer: number.

    Second lane:

    label: If Others, please specify - answer: text area

    Third lane:

    label: Do you have a biobank (collection of biological samples) for this disease? - answer: radiobotton (Yes, No)

    label: If Yes: - answer: Checkbox (DNA, Plasma or Serum) and textbox (or others (specify)) 

     

    Thank you! 

    format configurable list configurable checkbox label textbox dropdown list
  • Profile Image
    JotForm Support

    Answered by Nik_C on April 22, 2016 at 12:57 PM

    I'm working on this for you and I'll get back to you as soon as I finish it.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Nik_C on April 22, 2016 at 03:21 PM

    I think I manage to do something for you. This is my test form that you can clone or test by yourself: https://form.jotform.com/61096103740953.

    Please copy this code inside of your Custom CSS code for your Configurable list widget:

    .d {

    display:none;

    }

    th {

        display: none;

    }

    tr {

    display: block;

    }

    td.col4:before {

    content:"If Others:";

    display:block;

    }

    td.col4 {

     display: block;

     position: relative;

     top: 50px;

     left: 2px;

    }

    td.col5:before {

    content:"Do you have a biobank for this disease?";

    dispaly:block;

    }

     

    td.col5 {

        display: block;

        position: relative;

        top: 80px;

        left: 2px;

    }

    td.col6:before {

    content:"If Yes:";

    display:block;

    }

    td.col6 {

        display: block;

        position: relative;

        top: 20px;

        left: 260px;

    }

    td.col7:before {

    content:"Other:";

    display:block;

    }

    td.col7 {

        display: block;

        position: relative;

        top: 40px;

        left: 255px;

    }

    td.col1:before {

    content:"Target Protein/Gene/Locus";

    display:block;

    }

    td.col2:before {

    content:"Total N";

    display:block;

    }

    td.col3:before {

    content:"N < 18y";

    display:block;

    }

    Here is where you copy the above CSS code:

     

    Hope it helps, please let me know if you have any further questions.

  • Profile Image

    Answered by etiennekh on April 25, 2016 at 11:23 AM

    Thank you So much!! This really Helped!!

  • Profile Image
    JotForm Support

    Answered by Nik_C on April 25, 2016 at 12:29 PM

    You're welcome.

    I'm glad I was able to help you.

    Cheers!