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 matrix with 19 columns with no side labels?

    Asked by mmarkowski on May 13, 2016 at 11:05 AM

    Hello,

    I would like to create a table of sorts to go on my page that looks like this:

     

    Each individual cell only has to be enough room for an individual character.

    What can I do to make this possible? Any ideas that would work instead?

     

    Here is my current form:

    https://form.jotform.com/61265690407154

    Thank you,

    Marisa

    Page URL:
    https://form.jotform.com/61265690407154

    Screenshot
    create a matrix
  • Profile Image
    JotForm Support

    Answered by Welvin on May 13, 2016 at 12:05 PM

    You already had the matrix field in the form. To add rows, simply put a space then press enter. You can then adjust the width of the textboxes by injecting the following custom CSS codes:

    #id_12 input {

        width: 15px;

    }

    Here's how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here's a screenshot of the result:

  • Profile Image

    Answered by mmarkowski on May 13, 2016 at 12:13 PM

    Thank you for helping me adjust the width. It fits perfectly. I have tried adding more rows, but every time that I have 7, it goes back to 5 after I close out of the drop-down menu. Is there anyway to keep it at 5? And why does the final form with the columns set to the new width now look all deformed?

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Welvin on May 13, 2016 at 12:25 PM

    Please do it this way instead.

    1. Add a placeholder, you can put numbers such as 1 to 5. Example:

    2. Add the following custom CSS codes to hide these placeholders:

    th.form-matrix-row-headers {

        visibility: hidden;

        border: none;

    }

     

    The result is the following, which I think the most perfect :)

     

  • Profile Image

    Answered by mmarkowski on May 13, 2016 at 12:42 PM

    That does look much better! Thank you so much! I am still wondering though why the background/formatting of the entire document got messed up. Is there anyway to fix this? Also, is it possible to make all of the squares outlined in black and not just the first 4 columns?

    Thanks,

  • Profile Image
    JotForm Support

    Answered by Welvin on May 13, 2016 at 01:32 PM

    There is an installed theme in the form. Please try overriding that one with the default theme in the Theme selector:

    Click Theme Store then filter by Free Themes then choose "Default Theme":

    If this is not working, I'd suggest creating a new blank form and clone/copy the fields from this form to the new form using our field manager app: http://apps.jotform.com/app/field_manager.

     

    For the black outline or border, replace the following custom CSS codes:

    #id_12 input {

        width: 15px;

    }

    with:

    #id_12 input {

        width: 15px;

        outline: none;

        border: 1px solid #000;

    }

     

     

  • Profile Image

    Answered by mmarkowski on May 16, 2016 at 12:14 PM

    Hi, again! I was able to successfully use the field manager to clone the form into a new on which can be found at: https://form.jotform.com/61364444857160

     

    However, as you can see, the matrix now spills out of the rest of the form. Is there anyway to re-code it to fit again?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 16, 2016 at 01:38 PM

    ust inject this CSS code: 

    [data-type="control_matrix"] input {
    width15px;
  • Profile Image

    Answered by mmarkowski on May 16, 2016 at 01:46 PM

    I entered that coding in, and it makes it fit in the editing screen, but when I view the live form nothing is changed. Any ideas?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 16, 2016 at 02:19 PM

    I checked your form using the Designer tool and noticed that there were some errors in the code: 

    However, I have fixed it and the matrix field is displaying fine on your form now, please check and confirm us that you see the same on your end. 

  • Profile Image

    Answered by mmarkowski on May 19, 2016 at 10:24 AM

    Yes, it is perfect! Thank you very much!