How to create a table with two columns question, see attached image

How to create a table with two columns question, see attached image, I need a questions column A by left, and question column B by right, then selections in the middle as in this image, please asap

I'm using classic form, can i apply css ? seems my request can only be done with that

I'm using card form

Hi daprinceolaolex06,

Thanks for reaching out to Jotform Support. Currently, it is not possible to create an Input Table with the same look as shown in your screenshot. I would suggest using the Scale Rating form element as shown in the screenshot.

Here's how to add it:

1. In Form Builder, on the left side of the screen, click on Add Form Element.

2. Scroll down to Scale Rating.

3. Click/Drag to add it into the form.

You can then label the other option of the Scale Rating with custom CSS code as provided below.

/*Add label to 2nd option in Scale Rating - 14217041*/

.rating-item:nth-child(2)::before {

    content: "Agree with A";

    font-size: 12px;

    font-family: 'Inter', sans-serif;

    margin-top: 6px;

    color: #8f9bae;

}

/*Code ends here*/

You can reuse the CSS code for other options by updating the number for nth-child() as shown in the screenshot.



Here's how to inject the custom CSS code:

1. In Form Builder, click on the Paint Roller icon on the right side of the screen.

2. On the right panel, go to Styles.

3. Scroll down to Inject Custom CSS.

4. Paste the provided CSS code.

Result:

Give it a try and let us know how it goes.

but sorry, this does not properly solve as in the image, can you do one as in the image? I need texts to be typed under labelled A, and text under labelled B as well, can u explian way to do this?

see how this isnt neat, the method doesn't work perfectly, we still have 1 (should be A), then texts below, as in the first image i sent

Hi olaolex,

We can join two input tables into one and just get the row labels on the second table using custom CSS. Check out this screenshot of my result:

Here is my sample form you can check. You can also clone it by following this guide on how to clone forms.

Give it a try and let us know if this works for you.

hi doesnt help, the form went scattered after i cloned, please which method now

and the joining method isnt visible on smartphone, but just pc

I'm thinking if the configurable elemetn can help, then we make two columns as view only, yhen options to pick rating at the middle

I saw a method with configurable list, but doesnt help still, pls find a great methos, that looks like table

Hi olaolex,

Thanks for getting back to us. Unfortunately, there's no other method to have your requirement done using a table. A cleaner way to do this rating is to use the method shared by Christopher earlier. You can number them like I did in this demo form:

Feel free to check out my demo form here. You can clone it to further test it.

Give it a try and let us know if that works for you.

please explain how Richie  join two input tables, let me use that

please explain how to join the two box using css, and how I can ass A and B at top left and right

Hi daprinceolaolex06,

Thanks for getting back to us. I cloned the form made by my colleague Richie and I noticed that it was 2 input tables in the Form Builder and when you preview the form, it will show as one table because he added a Custom CSS code to align the 2 table in a single line, not actually joined the 2 tables. The solution was just a workaround to get the desired outcome. Please see the screencast below:

If you wish to continue this method, unfortunately, we cannot Add Column Headers for Column A and B. But you can add another column. Let me show you how:

1. In Form Builder, Click on the Input Table Widget.
2. Click the add column at the right most corner of the table and then add the column name.

I also have a workaround in mind, but this is using a Card Form Layout and breaking the table down into separate questions. Please see screencast below:

Visit our user guides about How to Create a Jotform Card and How to Change Your Form Layout for more detailed information. You may also want to check out related Jotform User Guides about Card Forms.

Here's the link to my test form for you to check and see the results. Also, you can clone the form by following this guide on How to Clone an Existing Form From a URL.

Give it a try and let us know how it goes.

please help me edit this css to balance the two table, and if the second table can be non scrollable, and (A written at top left, B written at top right), heres survey link;

https://form.jotform.com/241142569531555

heres the css;

.form-label.form-label-auto {

  display : block;

  float : none;

  text-align : left;

  width : 100%;

}

#id_124 {

  width : 78% !important;

}

.form-line {

}

#id_125 {

  position : absolute !important;

  margin-left : 504px;

  width : 10%;

  margin-top : 22px;

}

#id_125 .form-radio + label::before {

  display : none !important;

}

.form-matrix-headers.form-matrix-row-headers {

  box-sizing : 22px;

}

#label_124 {

}

.form-matrix-th {

}

#cid_124 th.form-matrix-th {

}

I want column 'strongly agree with B' to show well in middle too

Hi daprinceolaolex06,

I have cloned your form and made my own customized CSS code by using a single Input Table as shown in the screenshot.

Here is my demo form, which you can get a copy of it by using the clone feature.

Give it a try and let us know how it goes.

thanks very much, please help me reedit to add A at the top left side, and B at the top right side, so it makes sense which list are we reffering to on each, and it would be great if the purple coloring doesnt cover the line of each row

Hi daprinceolaolex06,

Thanks for getting back to us. I understand the issue, but I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hope christopher can take this up very fast for me

Hi daprinceolaolex06,

We really appreciate your patience and understanding while we’re looking into this. I cloned the form my colleague Christopher has initially set up. There's no direct way to add them up, but I found a workaround. I added a few custom CSS Codes to remove Row Headers and replaced it with a new Column for Column A and tweaked Christopher's CSS codes for Column B. Here's a screenshot of the result:

I added the whole block of Custom CSS Code below for you to copy and add it to your form, or you can clone my demo form by following this guide on How to Clone an Existing Form From a URL:

.form-matrix-values > .form-textbox {

    display: none !important;

}



/* Column A */

.form-matrix-values:nth-child(2) {

    position: relative;

    font-size: .75em;

    font-weight: 500;

    padding: 12px;

    background-color: #12458c;

}

.form-matrix-tr:nth-child(2) > .form-matrix-values:nth-child(2)::before {

    content: "I prefer a lifestyle of material abundance" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(3) > .form-matrix-values:nth-child(2)::before {

    content: "I never hesitate to buy the things I want" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(4) > .form-matrix-values:nth-child(2)::before {

    content: "Even if expensive, I buy products that last long" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(5) > .form-matrix-values:nth-child(2)::before {

    content: "I buy the newest products on the market" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(6) > .form-matrix-values:nth-child(2)::before {

    content: "I am open to sharing services" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(7) > .form-matrix-values:nth-child(2)::before {

    content: "I am reluctant to buy Chinese products" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(8) > .form-matrix-values:nth-child(2)::before {

    content: "I feel that business conditions are good" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



/* Column B */

.form-matrix-values:nth-child(10) {

    position: relative;

    font-size: .75em;

    font-weight: 500;

    padding: 12px;

    background-color: #12458c;

}



.form-matrix-tr:nth-child(2) > .form-matrix-values:nth-child(10)::before {

    content: "I prefer a minimalist lifestyle" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(3) > .form-matrix-values:nth-child(10)::before {

    content: "I always carefully consider whether I need something before I purchase it" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(4) > .form-matrix-values:nth-child(10)::before {

    content: "If inexpensive, I don't mind if products don’t last long" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(5) > .form-matrix-values:nth-child(10)::before {

    content: "I choose products with history and proven results" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(6) > .form-matrix-values:nth-child(10)::before {

    content: "I have an aversion to sharing services" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(7) > .form-matrix-values:nth-child(10)::before {

    content: "I am not reluctant to buy Chinese products" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



.form-matrix-tr:nth-child(8) > .form-matrix-values:nth-child(10)::before {

    content: "I feel that the economic situation is poor" !important;

    font-size: 12px;

    font-family: inter, sans-serif;

    color: white;

}



/* Remove Row Headers */

.form-matrix-row-headers {

    visibility: hidden;

}

th:nth-child(1){

    display: none;

}

Give it a try and let us know how it goes.

Thanks very much, but on checking other tables in the form, it affected , it shows radio button of other tables where it shouldnt be

Hi daprinceolaolex06,

You can add the following CSS code to the demo form that our teammate Christopher  provided.

#cid_126 th.form-matrix-th:after {

  content: "A";

  transform: translateX(30px);

  position: fixed;

}



.form-matrix-headers:nth-child(9):after {

  content: "B"!important;

  color: black!important;

  position: fixed;

  transform: translateX(-28px);

}

.form-matrix-headers:nth-child(9) {

  opacity: 1;

  background-color: transparent;

}

Give it a try and let us know if there's anything else we can do for you.

I have a new issue, I need to build another table for Q4 as Christopher built for me, so I duplicated Q1 and copy to Q4, I tried editting the B column in css, but didnt get it, anytime I edit Q4 column, it affects details in Q1, I sent a screenshot for Q4 details (column A and B), please assist and help me do Q4, different details from Q1. Q1 id perfect, but Q4 doesn't show letter 'A' at top left side, and im unable to edit Q4 B column. color of leter B can be blue as well, thanks - here's the new working link - https://form.jotform.com/241150769618158 -

Hi daprinceolaolex06,

Please replace all your existing CSS code with the one provided below.

.form-matrix-values > .form-textbox {

    display : none !important;

}





.form-matrix-headers:nth-child(9) {

    opacity : 1;

    background-color : transparent;

}





.form-matrix-column_7 {

    border-color: transparent !important;

}





.form-matrix-values:nth-child(9) {

    position : relative;

    font-size : .75em;

    font-weight : 500;

    padding : 12px;

    background-color : #12458c;

}





#cid_126 th.form-matrix-th:after {

    content : "A";

    padding: 2em;

}





#cid_126 > table > tbody > .form-matrix-header-tr > .form-matrix-column_7:before {

    content: "B";

    color: #12458c;

    font-weight: 800;

    font-size: 16px;

}





#cid_126 > table > tbody > .form-matrix-tr:nth-child(2) > .form-matrix-values:nth-child(9)::before {

    content : "I prefer a minimalist lifestyle" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_126 > table > tbody > .form-matrix-tr:nth-child(3) > .form-matrix-values:nth-child(9)::before {

    content : "I always carefully consider whether I need something before I purchase it" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_126 > table > tbody > .form-matrix-tr:nth-child(4) > .form-matrix-values:nth-child(9)::before {

    content : "If inexpensive, I don't mind if products don’t last long" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_126 > table > tbody > .form-matrix-tr:nth-child(5) > .form-matrix-values:nth-child(9)::before {

    content : "I choose products with history and proven results" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_126 > table > tbody > .form-matrix-tr:nth-child(6) > .form-matrix-values:nth-child(9)::before {

    content : "I have an aversion to sharing services" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_126 > table > tbody > .form-matrix-tr:nth-child(7) > .form-matrix-values:nth-child(9)::before {

    content : "I am not reluctant to buy Chinese products" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_126 > table > tbody > .form-matrix-tr:nth-child(8) > .form-matrix-values:nth-child(9)::before {

    content : "I feel that the economic situation is poor" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_149 th.form-matrix-th:after {

    content : "A";

    padding: 2em;

}





#cid_149 > table > tbody > .form-matrix-header-tr > .form-matrix-column_7:before {

    content: "B";

    color: #12458c;

    font-weight: 800;

    font-size: 16px;

}





#cid_149 > table > tbody > .form-matrix-tr:nth-child(2) > .form-matrix-values:nth-child(9)::before {

    content : "I prefer a minimalist lifestyle" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_149 > table > tbody > .form-matrix-tr:nth-child(3) > .form-matrix-values:nth-child(9)::before {

    content : "I always carefully consider whether I need something before I purchase it" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_149 > table > tbody > .form-matrix-tr:nth-child(4) > .form-matrix-values:nth-child(9)::before {

    content : "If inexpensive, I don't mind if products don’t last long" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_149 > table > tbody > .form-matrix-tr:nth-child(5) > .form-matrix-values:nth-child(9)::before {

    content : "I choose products with history and proven results" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_149 > table > tbody > .form-matrix-tr:nth-child(6) > .form-matrix-values:nth-child(9)::before {

    content : "I have an aversion to sharing services" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_149 > table > tbody > .form-matrix-tr:nth-child(7) > .form-matrix-values:nth-child(9)::before {

    content : "I am not reluctant to buy Chinese products" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}





#cid_149 > table > tbody > .form-matrix-tr:nth-child(8) > .form-matrix-values:nth-child(9)::before {

    content : "I feel that the economic situation is poor" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}

Give it a try and let us know how it goes.

Thanks christopher, but this is not solved yet, only the font is solved. I need to change the 'B' column on Q4, the Q1 you created for me is what i duplicated to form Q4, but when I tried to edit on the css, any edit made affects both Q1 and Q4, which I only need Q4 'B' column edited, Q1 is perfect already, not sure if we'll create a seprated table and .form css for Q4, - https://form.jotform.com/241150769618158

Hi daprinceolaolex06,

I have created two set of CSS code as provided on my previous reply. The CSS code that starts with #cid_126 is for Q1 while the CSS code that starts with #cid_149 is for Q2 as shown in the screenshots.

Here is the CSS code that I am referring to for Q4.

#cid_149 th.form-matrix-th:after {

    content : "A";

    padding: 2em;

}



#cid_149 > table > tbody > .form-matrix-header-tr > .form-matrix-column_7:before {

    content: "B";

    color: #12458c;

    font-weight: 800;

    font-size: 16px;

}



#cid_149 > table > tbody > .form-matrix-tr:nth-child(2) > .form-matrix-values:nth-child(9)::before {

    content : "1st row" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}



#cid_149 > table > tbody > .form-matrix-tr:nth-child(3) > .form-matrix-values:nth-child(9)::before {

    content : "2nd row" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}



#cid_149 > table > tbody > .form-matrix-tr:nth-child(4) > .form-matrix-values:nth-child(9)::before {

    content : "3rd row" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}



#cid_149 > table > tbody > .form-matrix-tr:nth-child(5) > .form-matrix-values:nth-child(9)::before {

    content : "4th row" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}



#cid_149 > table > tbody > .form-matrix-tr:nth-child(6) > .form-matrix-values:nth-child(9)::before {

    content : "5th row" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}



#cid_149 > table > tbody > .form-matrix-tr:nth-child(7) > .form-matrix-values:nth-child(9)::before {

    content : "6th row" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}



#cid_149 > table > tbody > .form-matrix-tr:nth-child(8) > .form-matrix-values:nth-child(9)::before {

    content : "7th row" !important;

    font-size : 12px;

    font-family : inter, sans-serif;

    color : white;

}

Give it a try and let us know how it goes.

Thanks christopher, thats solved,

Hi daprinceolaolex06,

Thanks for getting back to us. To avoid any confusion on this thread, I moved your other questions to new threads. You can check them out on the links below, and I will get back to you as soon as possible.

• How can I limit the selection of the Visual Multi Select widget?
• Input Table: How can I allow one selection per column?

Let us know if you need any more help.

HI CHRISTOPHER, it remains one more table with column A and B I need to create, this table will be on Q56, please check the form again, on Q56, provide me the css to edit the right B column

Hi there,

If the CSS code provided by Christopher, worked in the previous step, please consider using the same CSS code except:

1. replace #cid_149 with #cid_224 in the code, and
2. replace the content for each row header

So this will how the new CSS code will be:

#cid_224 th.form-matrix-th:after {

  content : "A";

  padding: 2em;

}

#cid_224 > table > tbody > .form-matrix-header-tr > .form-matrix-column_7:before {

  content: "B";

  color: #12458c;

  font-weight: 800;

  font-size: 16px;

}

#cid_224 > table > tbody > .form-matrix-tr:nth-child(2) > .form-matrix-values:nth-child(9)::before {

  content : "I want to purchase a car with the newest technologies and features" !important;

  font-size : 12px;

  font-family : inter, sans-serif;

  color : white;

}

#cid_224 > table > tbody > .form-matrix-tr:nth-child(3) > .form-matrix-values:nth-child(9)::before {

  content : "I want to drive as little as possible, and rely on autonomous driving" !important;

  font-size : 12px;

  font-family : inter, sans-serif;

  color : white;

}

#cid_224 > table > tbody > .form-matrix-tr:nth-child(4) > .form-matrix-values:nth-child(9)::before {

  content : "I want a spacious car that can carry ample passengers and storage" !important;

  font-size : 12px;

  font-family : inter, sans-serif;

  color : white;

}

#cid_224 > table > tbody > .form-matrix-tr:nth-child(5) > .form-matrix-values:nth-child(9)::before {

  content : "I want a vehicle with minimal noise and vibration so that I can have a relaxing ride" !important;

  font-size : 12px;

  font-family : inter, sans-serif;

  color : white;

}

#cid_224 > table > tbody > .form-matrix-tr:nth-child(6) > .form-matrix-values:nth-child(9)::before {

  content : "I always want to upgrade to the newest features " !important;

  font-size : 12px;

  font-family : inter, sans-serif;

  color : white;

}

#cid_224 > table > tbody > .form-matrix-tr:nth-child(7) > .form-matrix-values:nth-child(9)::before {

  content : "I enjoy playing music and videos while driving" !important;

  font-size : 12px;

  font-family : inter, sans-serif;

  color : white;

}

Give it a try and let us know if you have any further questions.

thanks that works, and I have a new issue, I need to restrict user to be able to pick one field per page or so, for example on Q28B - https://form.jotform.com/241150769618158

Aim is, e.g Q28A, what colors do you like options; Blue, Green, Red, Yellow. now user picks multiple best colors , these colors picked shows as option in Q28B, then a question asks out of the 3 best colors you picked, which one is your best favourite color, then user picks one option from the 3 selected color in previous page, how can i do these, respond fats please, Christopher help!

e.g, this 29A (picks some in 29A) and 29B(picks from 29A shows in 29B, then picks serves as options again in 29B, then ask to select one

Hi daprinceolaolex06,

Thanks for getting back to us. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

We really appreciate your patience and understanding. 

Hi daprinceolaolex06,

Thanks for getting back to us. I checked your form and question Q28.(B), and you have added many multiple-choice elements. Do you want the users to select only one multiple-choice option on the page? The feature you are looking for is not available and as a workaround for that, you can add calculation values in all multiple-choice elements of the page and calculate the total to check how many options they have selected. Let me show you how:

Let us first add the calculation value for each multiple-choice element option.

1. In Form Builder, click on the Multiple-choice element and then click on the gear icon. 
2. In the Options tab, toggle the Calculation Values button to the ON position.
3. Add the value 1 for the option.
4. Do this for each multiple-choice element you have on the page.

Now, let us calculate the total of all selected options of multiple-choice elements.

1. In Form Builder, click on the Add Form Element menu on the left side of the page.
2. Click on the Widgets tab.
3. Search for the Form Calculation widget, and click on it to add. Let's label it as Page Total.
4. Click on the Wand icon.
5. Click on the Add Field button and select all the multiple-choice element questions.
6. Add Addition + symbol after each element.
7. Finally, click on the Save button.

Now let us add a paragraph element to show the error if the user selects more than one option.

1. In Form Builder, click on the Add Form Element menu on the left side of the page.
2. Add a Paragraph element from under the Basic tab.
3. Click on the Pencil Icon to open the editor.
4. Add the text you would like to show and click on the Save icon.

Now, let us add a condition to show the paragraph element if the user has selected more than one option.

1. Click on the Settings tab from the orange navigation bar.
2. Click Conditions on the left menu.
3. Select the SHOW/HIDE FIELD condition.
4. Add condition as shown below:
5. In IF, select the Page Total element.
6. In STATE, select Is Greater Than.
7. In Target, select Value.
8. In Value, enter 1.
9. In DO, select Show from the dropdown.
10. In Field, select the Paragraph element and click on the Save button.

The condition should look like this.

Give it a try, and let us know if there's anything else I can help you with.