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

  • Profile Image
    adeptdesigns
    Asked 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!

     

  • Profile Image
    Ben
    Answered 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
    Ben
    Answered 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