How can I create a customized table?

  • Profile Image
    AnndeGroot
    Asked on October 31, 2016 at 09:47 AM

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

  • Profile Image
    olivia
    Answered on October 31, 2016 at 11:54 AM

    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.

  • Profile Image
    olivia
    Answered on October 31, 2016 at 03:49 PM

    Hi,

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

    Thank you for your understanding.

  • Profile Image
    AnndeGroot
    Answered on October 31, 2016 at 11:44 PM
    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
    ...
  • Profile Image
    AnndeGroot
    Answered on October 31, 2016 at 11:44 PM
    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
    ...
  • Profile Image
    owen
    Answered on November 01, 2016 at 03:25 AM

    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.