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 matrix rows?

    Asked by jeromejj4 on January 05, 2017 at 11:31 AM

    Hi,

    I have created a form in which I have survey sorts of questions.  There are many rows all right next to one another and in order to make it easier for the user to see what row they are on while answering the questions, I want to make each row an alternating color.  I'm hoping to use white and maybe a lighter grey than the current default.  I've looked at a couple answers for other forms but I don't do any CSS so I'm not sure how to go about getting it into my form.  It currently has two matrices but there will be more if my co-workers approve of the format.  As such any step by step information you could provide for when I add a new matrix would be amazing.  

     

    Thanks so much,

     

    Jenee

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

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 05, 2017 at 12:52 PM

    Please try to copy and paste the below CSS code to your Custom CSS field:

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

    background-color: white !important;

    }

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

    background-color:gray !important;

    }

    If you have any further questions please let us know.

    Thank you!

     

  • Profile Image

    Answered by jeromejj4 on January 09, 2017 at 12:39 PM

    Thank you!  This worked well for the answer section of the matrix.  Could the grey and white extend to the question rows too rather than just the answer portion of the rows?  Thank you again!

  • Profile Image
    JotForm Support

    Answered by david on January 09, 2017 at 03:38 PM

    It seems the table headers are all treated as on element.  Styling all of the headers a single color is possible, however, it appears as though the row headers would all need to be the same color. 

    For the row headers:

    .form-matrix-row-headers {

        background: white !important;

    }

     

    For the Column Header background:

    .form-matrix-column-headers {

        background: white !important;

    }

  • Profile Image

    Answered by jeromejj4 on January 09, 2017 at 05:07 PM

    Thank you!  The white at least helps with the overall readability even if it doesn't allow for an every other format.