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

    Changing the size, background and border colors of the matrix field

    Asked by MRRose on December 29, 2015 at 02:48 PM

    You will note the matrix survey tool...I would like to make the cells on the left (vertical) equal in height and width, I would like to put a border (black line around the cells), change the background of the label cells...finally, in the matrix I would ideally like to have the cell width for the 5 categories equal in size even though the content in each is different. Thanks for any help

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

    matrix field background color border color
  • Profile Image
    JotForm Support

    Answered by Welvin on December 29, 2015 at 04:13 PM

    Changing the Row Headers will make the whole matrix overlap to the right of the form so I think you can keep it that way.

    You will have to inject the following custom CSS codes to your form to change the colors/widths:

    For the Row Header background and border:

    .form-matrix-row-headers {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

        color: #F5F5F5 !important;

    }

     

    For the Column Header background and border:

    .form-matrix-column-headers {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

        min-width: 70px !important;

        color: #F5F5F5 !important;

    }

     

    For the radio button background and border:

    .form-matrix-values {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

    }

     

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