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 customize the appearance of a Matrix field?

    Asked by lucianobtm on May 21, 2015 at 09:24 AM

    Hello!

    I need to insert a fillable table for repliers to indicate information about hotel stays for a convention. Here's the form I intend to input into JotForm, but I'm having such a hard time doing it I preferred to call out for your assistance.

    Could you send me the CSS code so that I can add it to the widget (Spreadsheet)? I attached a sample of the form I need to build in JotForm.

    Thanks in advance.

    Luiz Moura

    Screenshot
    customized JotForm table css code assistance
  • Profile Image

    Answered by raul on May 21, 2015 at 11:16 AM

    I've created a cloned version of your form and noticed that you had a matrix field and a spreadsheet widget in your form.

    So, I've injected the CSS code below to make the matrix field look in a similar way as showed in the screenshot.

    .form-textbox { width: 96%; margin: 0; }
    .form-matrix-column-headers { background-color: #548033 !important; color: #FFF !important;}
    .form-matrix-row-headers { background-color: #C2DFA0 !important; }
    .form-matrix-values { padding: 0; }

    The result would be the following:

    You can see how to inject the code in your form here: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form 

    Let us know if you need further assistance.