Uploaded November 2025 | Updated September 2026, 1 week ago
Ever needed an easy way for employees to enter expenses into a Google Sheets ledger? Today, we're going to walk through vibe coding an easy, intuitive HTML form that will submit the results directly to your Google Sheet using ChatGPT.
You can make a copy of the Google Sheets + Apps Script with the final result here: bit.ly/3WUU0M4
*****ChatGPT Prompt*****
Let's build a Google Apps Script web application, project-bound to a Google Sheet for employees to enter multiple expense transactions.
Project Details:
* Use Bootstrap 5 CDN for a clean, responsive HTML form.
* Use a modern dark mode theme for the form. Make sure all text is readable.
* Pull dropdowns options from "DROPDOWNS" tab on the Google Sheet (Employees in A2:A, and Category in B2:B)
* "DATA" tab columns:
A: Date Entered: don't display on the form, just auto-calculate based on the date of submission.
B: Employee: dropdown but should only appear at the top of the form.
C: Transaction date: display in a user-friendly format (e.g. "5/1/2025")
D: Category: dropdown
E: Transaction Amount: currency (use USD formatting)
F: Description: text field
* C-F should be displayed in a table format with 5 rows displayed when the form is opened, and allow the user to click an icon to add another row.
* Save form submissions as new rows to the "DATA" tab in the Google Sheet, and use a modal popover to display the success message and auto-clear the form. Also disable and gray out the "Submit" button after it is pressed and add a spinner icon in the button while it is processing.
Ever needed an easy way for employees to enter expenses into a Google Sheets ledger? Today, we're going to walk through vibe coding an easy, intuitive HTML form that will submit the results directly to your Google Sheet using ChatGPT.
You can make a copy of the Google Sheets + Apps Script with the final result here: bit.ly/3WUU0M4
*****ChatGPT Prompt*****
Let's build a Google Apps Script web application, project-bound to a Google Sheet for employees to enter multiple expense transactions.
Project Details:
* Use Bootstrap 5 CDN for a clean, responsive HTML form.
* Use a modern dark mode theme for the form. Make sure all text is readable.
* Pull dropdowns options from "DROPDOWNS" tab on the Google Sheet (Employees in A2:A, and Category in B2:B)
* "DATA" tab columns:
A: Date Entered: don't display on the form, just auto-calculate based on the date of submission.
B: Employee: dropdown but should only appear at the top of the form.
C: Transaction date: display in a user-friendly format (e.g. "5/1/2025")
D: Category: dropdown
E: Transaction Amount: currency (use USD formatting)
F: Description: text field
* C-F should be displayed in a table format with 5 rows displayed when the form is opened, and allow the user to click an icon to add another row.
* Save form submissions as new rows to the "DATA" tab in the Google Sheet, and use a modal popover to display the success message and auto-clear the form. Also disable and gray out the "Submit" button after it is pressed and add a spinner icon in the button while it is processing.
