-
BigAlanAsked on February 14, 2017 at 6:16 PM
-
Kevin Support Team LeadReplied on February 14, 2017 at 6: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.