How can I create a customized table?

How can I create a customized table like the one below?

You can use Matrix to create this form.

1. Click `Survey Tools`.

2. Select `Matrix`.

However, you need to add explanations to your form by using Text field and inject some CSS Codes to change textbox sizes of that form.  On the other hand, you cannot validate fields as numeric in "Ideal" and "Maximum" columns but you can inform users with a Hover Text about inputs of these fields.

I have created an example form on my side. Please clone this form to your side and add missing explanations in that form.

https://form.jotform.com/63044621682958 

 

Finally, please have a look at these guides: 

How-to-Clone-an-Existing-Form-from-a-URL

How-to-Inject-Custom-CSS-Codes

 

In addition to that, if it is not the issue, could you please provide more details about your form?

If you need any further assistance, please feel free to contact us know.

Thank you.

Hi,

I have updated my previous comment. Could you please check it?

Thank you for your understanding.

Hi Olivia,
Thank you SO much for your help!
But one more question, I have already created a complete Form, how can I
import your table into my existing Form?
Thank you for your help.
Best regards,
Ann
...

Dear Olivia,
Or if it is not possible to import your table into an existing form, I have
created my own Matrix, but I cant get the margins right of the columns:
How can I adjust the width of each column?
Thanks!
Ann
...

Hi Ann,

When I check your form I can see that you have already created the matrix. I have cloned your form and did necessary changes by injecting CSS. Please first see how to inject custom CSS codes:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

When you follow the instructions here please copy and paste the following CSS code to the related field:

#input_97_0_1 {

    width : 75px;

}

 

#input_97_1_1 {

    width : 75px;

}

 

#input_97_2_1 {

    width : 75px;

}

 

#input_97_3_1 {

    width : 75px;

}

 

#input_97_4_1 {

    width : 75px;

}

 

#input_97_5_1 {

    width : 75px;

}

 

#input_97_0_2 {

    width : 75px;

}

 

#input_97_1_2 {

    width : 75px;

}

 

#input_97_2_2 {

    width : 75px;

}

 

#input_97_3_2 {

    width : 75px;

}

 

#input_97_4_2 {

    width : 75px;

}

 

#input_97_5_2 {

    width : 75px;

}

.form-matrix-values{

    background-color:#b3bbc9;

}

Here is how the matrix field looks like on the cloned version of your form after injecting this CSS code:

Please apply this and let us know if there should be any additional changes to be made on the field.

Thank you for contacting us.