Spreadsheet Widget: Change the serial number to weekdays name.

Need Help. This is beyond my expertise. On the form below, I need the grid lines to show, the left side of the week one and week two sections I need to be 1=Sunday, 2=Monday...Etc. I need the font size of the numbers on the spreadsheet to be at least 12-14 font size. Can the total hours Week one automatically post on Week one total? Same for week two. Also can the hours for both weeks auto populate to the total timesheet breakdown and confirm total hours on week one & two?

Need help

Hi ofTool,

Thanks for reaching out to Jotform Support. Can you explain a little more what exactly you are looking apply by "Display grid lines on the form"? To change the field Number cells to weekdays names and the font size, we can use custom CSS code. Check out the steps and screenshot below to see how to add the custom CSS to your widget:

• Click on the Wand icon to open Widget Settings.
• Open the Custom CSS tab and add the below code.

/*Change the S.no to week days - 19151071*/

th#row_1,

th#row_2,

th#row_3,

th#row_4,

th#row_5,

th#row_6,

th#row_7,

th#row_8 {

    color: #007acc !important;

    padding-right: 15px;

}



th#row_1:after {

    content: "Sunday";

    color: white !important;

}



th#row_2:after {

    content: "Monday";

    color: white !important;

}



th#row_3:after {

    content: "Tuesday";

    color: white !important;

}



th#row_4:after {

    content: "Wednesday";

    color: white !important;

}



th#row_5:after {

    content: "Thursday";

    color: white !important;

}



th#row_6:after {

    content: "Friday";

    color: white !important;

}



th#row_7:after {

    content: "Saturday";

    color: white !important;

}



th#row_8:after {

    content: "Total";

    color: white !important;

}



/*To increase the font size*/

.cell-input {

    font-size: 14px !important;

}

• Click on the Update button to save the changes.

Here's what the result will look like:

Here's the cloned version of the form that you can test. As for your below calculation and auto-population requirements could not be done as it is not possible pass or auto-population a specific cell data from the Spreadsheet widget to another widget or a regular form field.

• Automatically calculate and display "Week One Total" based on hours entered in "Week One" section
• Automatically calculate and display "Week Two Total" based on hours entered in "Week Two" section
• Auto-populate "Total Timesheet Breakdown" with hours from both "Week One" and "Week Two"
• Display "Confirm Total Hours" for both weeks, calculated from the total hours entered

Let us know if there’s anything else we can help you with. 

When we say grid lines, they are the line shown as cell boundary lines as you have in a excel spreadsheet. Black cell boundary lines.

Hi ofTool,

To change the cell border color, check out the steps and screenshot below to see how to add the custom CSS to your widget:

• Click on the Wand icon to open Widget Settings.
• Open the Custom CSS tab and add the below code.

/*Change the cell border color - 19151071*/

td, th {

    border: 1px solid black !important;

}

• Click on the Update button to save the changes.

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Give it a try and let us know how it goes.