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 to change the color of the row in the matrix question

    Asked by mbas123 on April 29, 2015 at 12:56 AM

    Hi,

    I want to change the color of the row alternately of the Matrix type question and also want to put some color in the first column, first row of the matrix. Can I do that see pics below.

     

    Thanks,

    Rey Galvez

     

     

    matrix field CSS Custom CSS
  • Profile Image

    Answered by Sammy on April 29, 2015 at 05:04 AM

    Hi Galvez,

    To change the matrix background color, you can inject custom CSS that alters the classes colors for the rows.

    .form-matrix-column-headers {
        background : #D4594E !important;
        color : #FFF;
    }

    .form-matrix-row-headers {
        background-color : #FBFBE6 !important;
    }


    .form-matrix-table th {
        background : green;
    }

    Inject the above code to your form and test .

    Thanks

  • Profile Image

    Answered by mbas123 on April 30, 2015 at 12:33 PM

    Hi,

    Thanks, how to change the color of the rows alternately.

    Rey Galvez

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 30, 2015 at 02:19 PM

    Hi, Rey Galvez, 

    I understand that you would like for the Matrix table on your form to look like this: 

    In order for you to do that you need to add this following CSS code and you may use this guide.

    .form-matrix-table tr:nth-child(odd) td {

    background-color: #2F75B5;

    }

    .form-matrix-table tr:nth-child(even) td {

    background-color: #5B9BD5;

    }

    After applying the codes above, you Matrix table should look like this. (Please see image below)

    Note: You can, of course, replace the background-color to your preference.

    I hope this helps. Should you need any further assistance, kindly let us know and we will be glad to help.

     

    Thank you for using JotForm.

     

    Kind regards.