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 can I create a customized table?

    Asked by AnndeGroot on October 31, 2016 at 09:47 AM

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

    Screenshot
    table customized create how
  • Profile Image
    JotForm Support

    Answered by olivia 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
    JotForm Support

    Answered by olivia 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

    Answered by AnndeGroot 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

    Answered by AnndeGroot 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
    JotForm Support

    Answered by owen 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.