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 to change the headers on the Spreadsheet widget?

    Asked by Estefania on June 23, 2015 at 11:30 AM
    Ok, is there any way to change the column/row labels with the regular spreadsheet? Or is that only available on the Advanced Spreadsheet?
    spreadsheet widget CSS custom CSS Spreadsheet headers
  • Profile Image

    Answered by Ben on June 23, 2015 at 11:40 AM

    As mentioned, I am following up with the CSS code that will allow you to change the headers of your Spreadsheet widget.

    This is the CSS code:

    tbody > tr:first-child {
        background-color: #333;
    }
    #col_A, #col_B, #col_C, #col_D {
        visibility: hidden;
    }
    #col_A:before, #col_B:before,#col_C:before,#col_D:before {
        visibility: visible;
    }
    #col_A:before {
        content: "International";
    }
    #col_B:before {
        content: "British Isles";
    }
    #col_C:before {
        content: "US & Canada";
    }
    #col_D:before {
        content: "Unknown";
    }

    If you need to change the text in any of them, you can do so easily by changing the bold parts of the code above.

    Also, if it seems as if it is not working in your Form Builder, do take a look at the widget in the Preview window instead to check it out instead and you will see it showing as it should.

    You can see it in action here: http://form.jotformpro.com/form/51734880493968

    Also, to apply the CSS code you must go to the widgets wizard, by clicking on the wand like icon in the top right corner of the widget:

    Once you do, just scroll down in the wizard until you see the Custom CSS field of the widget and just paste the code in there and click on Finish.

    Do let us know how it goes Estefania.

  • Profile Image

    Answered by Estefania  on June 23, 2015 at 06:32 PM

    Unfortunately, that doesn't work either.

    Most of the CSS makes sense but because you have the following:

    this deletes the column labels. If that is deleted, it shows "InternationalA" which doesn't fix the problem either.

    #col_A, #col_B, #col_C, #col_D {
        visibility: hidden;

    Can you adjust the CSS so it will work?

     

     

  • Profile Image

    Answered by raul on June 23, 2015 at 07:38 PM

    Please try using the following code instead:

    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";
    }

    This would produce the following result: 

    You can see a cloned version of your form here: http://form.jotformpro.com/form/51737638418969 feel free to clone it to your account if you want to.

  • Profile Image

    Answered by Estefania  on June 26, 2015 at 03:18 PM

    Hello,

    Question, we updated our form with the Spreadsheet widget which works really well now. However, we encountered two problems:

    1. Spreadsheet widget doesn't show up on IE. Can that be fixed?

    2. When the form is submitted, it still has the original A-D columns instead of the labels we put on there. can that be fixed?

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by david on June 26, 2015 at 04:23 PM

    I have moved your new questions to a separate thread.  I will update you with my response in this thread here shortly:

    http://www.jotform.com/answers/597755