How to build something like Configurable List but with 3 columns and rows

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

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. 

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:   

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. 

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! 

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. 

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

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.