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

    Can I set up a table with set rows and columns that is fillable by user?

    Asked by adeptdesigns on October 30, 2014 at 12:23 PM

    For example:

    I see that there is a spreadsheet widget, but I do not see where you can modify the row and column labels.

    Thank you!

     

    table rows rows and columns spreadsheet widget
  • Profile Image

    Answered by Ben on October 30, 2014 at 02:17 PM

    Hi,

    While there is no option of changing the spreadsheet column names, we could use a bit of CSS to go around that and make it listen :)

    Please take a look here to see the finished product: http://form.jotformpro.com/form/43025337541953

    This is the CSS code that you would need to inject to have that same style of the table:

    tr:first-child > th:first-child:after {
        content: "EDUCATION";
    }
    th#col_A.A:after, th#col_B.B:after,th#col_C.C:after,th#col_D.D:after,th#col_E.E:after,th#row_1:after,th#row_2:after,th#row_3:after,th#row_4:after{
        color: white;
        font-size: 14px
    }
    th#col_A.A:after {
        content: "Name and location of school";
        display: inline-block;;
        width: 200px;
    }
    th#col_A.A, th#col_B.B, th#col_C.C,th#col_D.D,th#row_1,th#row_2,th#row_3,th#row_4 {
        color: #666;
        font-size: 0;
    }
    th#col_B.B:after {
        content: "*No of years attended";
        display: inline-block;
        width: 60px;
    }
    th#col_C.C:after {
        content: "*DID YOU GRADUATE?";
        display: inline-block;
        margin-right: 14px;
        width: 70px;
    }
    th#col_D.D:after {
        content: "SUBJECTS STUDIES";
    }

    th#row_1:after {
        content: "GRAMMAR SCHOOL";
    }
    th#row_2:after {
        content: "HIGH SCHOOL";
    }
    th#row_3:after {
        content: "COLLEGE";
    }

    th#row_1:after {
        content: "GRAMMAR SCHOOL";
    }
    th#row_2:after {
        content: "HIGH SCHOOL";
    }
    th#row_4:after {
        content: "TRADE BUSINESS OR CORRESPONDENCE SCHOOL";
    }

    tr.r4 > td > input {
        height: 80px;
    }
    td > input[type="text"] {
        height: 40px;
        width: 100%;
    }

    You would also need to change the row count to 4 as well as the column count (same to 4) and to edit the width of the spreadsheet widget to 700px.

    To do all that, just click on the widget and take a look at the buttons on the toolbar.

    Do let us know how it goes for you and if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by Ben on October 30, 2014 at 02:18 PM

    Hi,

    Just to add. You can also clone it to your account following this guide: How to Clone an Existing Form from a URL

    Best Regards,
    Ben