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 build something like Configurable List but with 3 columns and rows

    Asked by MarianaCCForm on January 05, 2017 at 08:34 AM

    Hi. Can you do something similar to this but have 3 columns and 3 rows to fill in?



    This is a re-post of a comment on How to Set Up the Configurable List Widget

  • Profile Image
    JotForm Support

    Answered by owen on January 05, 2017 at 09:08 AM

    Hi Mariana,

    In order to achieve this, you can use our Matrix field. Please see the test form I built for you:

    https://form.jotform.com/70043512494955

    Please feel free to clone the form to have a further look into it. To get this yourself, please select the Matrix field under Survey Fields tab:

    You can configure the counts and the labels of the columns and rows here when the field is in selected state:

    You can even change the input field. They do not necessarily have to be radio buttons. They can be text boxes as well. Please see:

    I hope you'll find this helpful.

    Please contact us again if you need any further assistance. 

  • Profile Image

    Answered by MarianaCCForm on January 05, 2017 at 09:29 AM

    Hi Owen

    Thank you for the quick response. Not sure that is going to help me, what I ideally would want to achieve is something like the picture below:   

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 05, 2017 at 10:02 AM

    I see that this thread is similar to one on which I just replied to you. 

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

    Like I mentioned on other thread it is possible to position fields inside of Configurable list with CSS. 

    If you already created configurable list inside of your form, please provide us ID of the form and tell us how exactly would you like to position the fields. 

  • Profile Image

    Answered by MarianaCCForm on January 05, 2017 at 10:37 AM

    Thank You Joanna. 

    Here is the link: https://form.myjotform.com/70043360661548

    Title, Name and Sure name can be next to each other and the rest of the field below each other please.

    Thank you! 

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 05, 2017 at 11:42 AM

    Please add following CSS code to Custom CSS field of your widget: 

    d {

    display:none;

    }

    th {

        display: none;

    height:700px!important;

    }

    .col1:before {

        content:"Title";

    display: block;

    }

    .col2:before {

        content:"Name";

    display: block;

    }

    .col3:before {

        content:"Sure name";

    display: block;

    }

    .col4:before {

        content:"ID / Passport Number";

    display: block;

    }

    .col5:before {

        content:"Occupation / Job Title";

    display: block;

    }

    .col6:before {

        content:"Telephone";

    display: block;

    }

    .col7:before {

        content:"Alternate Telephone";

    display: block;

    }

    .col8:before {

        content:"Country & Region";

    display: block;

    }

    .col9:before {

        content:"Email Address";

    display: block;

    }

    .col10:before {

        content:"Any Special Dietry Requirements";

    display: block;

    }

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

        display: block;

        position: relative;

    }

    .col4 {

        left: -377px;

        top: 40px!important;

        position: relative;

    }

    .col5{

    left:-230px;

    top:0px;

    }

    td.col6, td.col7,td.col8, td.col9, td.col10{left: -377px;

        top: 10px;}

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

    Feel free to test it and clone it.

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

  • Profile Image

    Answered by MarianaCCForm on January 06, 2017 at 04:16 AM

    Hi, I've copied and pasted the code but as picture below this is how the form looks when I preview the form?

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 06, 2017 at 04:44 AM

    I updated the code a bit. Please copy this code:

    d {

    display:none;

    }

    th {

        display: none;

    height:700px!important;

    }

    .col1:before {

        content:"Title";

    display: block;

    }

    .col2:before {

        content:"Name";

    display: block;

    }

    .col3:before {

        content:"Sure name";

    display: block;

    }

    .col4:before {

        content:"ID / Passport Number";

    display: block;

    }

    .col5:before {

       content:"Occupation / Job Title";

    display: block;

    }

    .col6:before {

        content:"Telephone";

    display: block;

    }

    .col7:before {

        content:"Alternate Telephone";

    display: block;

    }

    .col8:before {

        content:"Country & Region";

    display: block;

    }

    .col9:before {

        content:"Email Address";

    display: block;

    }

    .col10:before {

        content:"Any Special Dietry Requirements";

    display: block;

    }

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

        display: block;

        position: relative;

    }

    .col4 {

        left: -377px;

        top: 40px!important;

        position: relative;

    }

    td.col5, td.col6, td.col7,td.col8, td.col9, td.col10{left: -377px;

        top: 40px;}

    td.col10{padding-bottom:40px}

    .add {position: relative;

    top:10px;}

    Here is my new form: https://form.jotform.com/70051996974973 

    You can also clone my form to your account. 

    How to Clone an Existing Form from a URL

    Let us know if you need further assistance.