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 can I customize rows and columns text?

    Asked by BigAlan 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
    JotForm Support

    Answered by Kevin_G 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.