Spreadsheet Widget - How can I customize rows and columns text?

  • Profile Image
    Asked on February 14, 2017 at 06:16 PM
    I am trying to make a form with 13 rows and 10 columns on it like a spreadsheet but without the letters and numbers on it, is it possible to use the spreadsheet and edit the numbers and letters out of it and put in my own text?
  • Profile Image
    Answered on February 14, 2017 at 06:39 PM

    If you want to use the Spreadsheet widget in your form and customize the columns names, then you need to inject this CSS code to the widget. 

    First, this code will help to hide the default columns and rows names: 

    tr th {

        font-size: 0px;


    Then with this code you set the new column name:

    th.A:after {

        content: "Custom name A" ;

        font-size : 14px;


    The class "A" will change based on the number of columns you have in your form, so if you would have A, B, C, D then you would add these classes as well with their custom desired name. 

    This code changes the rows name: 

    th#row_1:after {

        content: "First" ;

        font-size : 14px;


    You will need to repeat the same code based on the number of rows you have in your form, if you would have 10 rows then you would add this piece of code per row changing the ID "row_1" and increasing it until reach the number of  rows in your form.

    All this code needs to be injected to the widget, if you inject it to the form then it will not work. 

    To inject the code click on the widget and wizard icon, go to the CSS tab and paste the custom code there: 

    Here's  also a form with custom columns and rows names: https://form.jotform.com/61528191395966 

    Feel free to clone it: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Also, do note that this will be visible in the form only, you will still see the default columns and rows names in the submissions page. 

    Hope this helps.