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

    Spreadsheet Widget: How to hide the first row and column in the widget?

    Asked by forusretail on April 28, 2016 at 05:11 PM

    About the new spredsheet widget, I would like to know if I can hide the first row and column (A,B,C... and 1,2,3). Is it possible?

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 28, 2016 at 05:17 PM

    Yes, this is possible by injecting custom CSS code to your widget, this is the code: 

    th{

    display: none;

    }

    To inject the code you will need to click on the widget, then click on the wizard icon. 

    Once you're there, click on the CSS tab and paste the code there.

    Here is my sample form where this code has been applied: https://form.jotform.com/61186655410959

     

  • Profile Image

    Answered by MadGarcia on October 17, 2016 at 03:12 PM

    In a similar way, is it possible to create different text on the first row and column? Like "A" would be "monday"

     

    Tnks

  • Profile Image
    JotForm Support

    Answered by david on October 17, 2016 at 04:43 PM

    Adding the following CSS to the widgets CSS section will allow for showing a different column header:

    tbody > tr:first-child {
       background-color: #333;
    }

    #col_A, #col_B, #col_C, #col_D {
       color: transparent;
       font-size: 1px;
    }

    #col_A:before, #col_B:before,#col_C:before,#col_D:before {
        color: #FFF;
        font-size: 14px;
    }

    #col_A:before {
       content: "International";
    }

    #col_B:before {
       content: "British Isles";
    }

    #col_C:before {
       content: "US & Canada";
    }

    #col_D:before {
       content: "Unknown";
    }

    Change the text in between the quotes to change the columns headers.  This will allow for changing the first four column headers, if more are required, they can be set up by adding further columns in the CSS section.

    Please note that this does not change the actual column headers, it simply displays a different label over the actual label.  In the submission data, the headers will still show as A, B, C, D etc.

  • Profile Image

    Answered by MadGarcia on October 17, 2016 at 06:00 PM

    Would it not just change the columns text? What I what is to have the header rows with a diferent text.

    I've managed to create the text, but now my problem as to do with the width of the boxes, on the rows header.

    Can u help?

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 17, 2016 at 10:27 PM

    You can change the text of the row headers by adding the css below:

    tbody > tr:first-child {

       background-color: #333;

    }

    #row_1, #row_2, #row_3, #row_4 {

       color: transparent;

       font-size: 1px;

    }

    #row_1:before, #row_2:before,#row_3:before,#row_4:before {

        color: #FFF;

        font-size: 14px;

    }

    #row_1:before {

       content: "International";

    }

    #row_2:before {

       content: "British Isles";

    }

    #row_3:before {

       content: "US & Canada";

    }

    #row_4:before {

       content: "Unknown";

    }

    You can change the yellow highlighted text and replace it with your preferred text. Here's how it should look after:

    Then to change the width of the row header, please add the css below:

    .r1 th {

        width: 150px;

    }

    If you need further assistance, please let us know.
    Regards.