Spreadhseet widget: How to change column names?

  • brettwatson
    Asked on June 1, 2016 at 8:37 PM
  • Kevin Support Team Lead
    Replied on June 1, 2016 at 10:52 PM

    I think this might help you, if I'm correct you're trying to set custom names to columns in the spreadsheet widget, if so, then this will help you. 

    First add this CSS code to the widget: 

    tr:nth-child(1) th {

        font-size: 0px;

    }

    That code will hide all the current names (A, B, C, D...) depending on the number of columns you have in your form. 

    This code will help you to set the custom name: 

    th.A:after {

        content: "Custom name A" ;

        font-size : 20px;

    }

    The only thing that will change in this code will be the used class (.A) for example, to change the name of column B you will use the class .B and the same with the other columns that you will have in your spreadsheet. 

    To add the code to your widget only click on the widget and click on the wizard icon: 

    Spreadhseet widget: How to change column names? Image 1 Screenshot 30

    Then click on the CSS tab and paste the code there: 

    Spreadhseet widget: How to change column names? Image 2 Screenshot 41

    Here is my sample form: https://form.jotform.com/61528191395966 

    Hope this helps. 

  • Support_Management Jotform Support
    Replied on June 7, 2017 at 7:56 AM

    @trripradmin - To give way to the OP, I moved your post to a separate thread https://www.jotform.com/answers/1165953

    We'll have it addressed there shortly.