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

    Matrix Dynamique: Alter the style to look similar to spreadsheet

    Asked by alieberman on October 23, 2014 at 11:59 AM

    Page URL:
    http://form.jotform.us/form/42954176243155

    JotForm Matrix Dynamique spreadsheet CSS
  • Profile Image

    Answered by Ben on October 23, 2014 at 02:38 PM

    Hi,

    Yes, you can alter the style of it through its CSS field.

    You can see here the finished jotform with the style already added to it: http://form.jotformpro.com/form/42955470298971

    If you want to clone it to your account you should follow these steps: How to Clone an Existing Form from a URL

    Now these are the steps to create the same:

    1. Open the Matrix Dynamique wizard and and scroll down to the Custom CSS field

    Now paste this CSS in the Custom CSS field:

    tr#contentHeader > th[scope="col"] {
        background-color: red;
        border: 2px solid black;
        color: white;
        margin: 0 !important;
        padding: 0 7px;
        width: 33%;
        word-break: break-all;
    }
    #contentTable > tbody > tr,#contentTable > tbody > tr >td {
        border: 1px solid gray;
        text-align: center;
    }
    span.spantext
    {
        width: 100%;
    }
    #contentTable > tfoot > tr >td {
        padding: 0 10px;
    }
    #contentTable > tfoot > tr > td > input {
        height: 40px;
        width: 100px;
        margin-top: 2px;
    }

    Now click on Finish and save your jotform. Please take a look at its preview and it should look like the one I added at the start.

    If you have any further questions, please let us know.

    Best Regards,
    Ben