Uploaded August 2025 | Updated September 2026, 1 week ago
Do you need an internal order form for your organization? In today's video, we're going to use ChatGPT to vibe code an order form that will take dropdowns from a Google Sheet, populate a HTML order form, and then take the submitted data and add it to a tab on the Google Sheet.
You can make a copy of the final Google Sheet & Script here: bit.ly/469ymYj
***** SAMPLE AI PROMPT *****
Build a Google Apps Script HTML web app that acts as an order form, backed by a Google Sheet with three tabs:
1. "ORDER - LINE ITEMS" (columns: Order Date, Order #, Product, Qty, Location)
2. "INVENTORY" (columns: Out of Stock, SKU, Category, Product Name, Image Link, Description)
3. "LOCATIONS" (columns: Location, Street Address, City, State, Zip, Email, Phone)
The app should:
* Frontend Design (HTML + Bootstrap):
* Use Bootstrap 5 for styling.
* Form container should have a medium gray background (#dee2e6), padding, and soft box-shadow.
* Include a Location dropdown at the top.
* Display a dynamic table with 5 default line item rows. Each row should include:
* Category dropdown (populated from INVENTORY)
* Dependent Product dropdown with thumbnail image and tooltip on hover (image + description)
* Quantity field (blank by default, placeholder “Enter Qty”)
* Delete button with a trash can icon (Bootstrap Icons)
* Allow adding more line items with a "+ Add Item" button.
Form Behavior:
* Auto-focus the qty input when a row is added.
* Validate qty input only if a product has been selected. If qty is missing or invalid, highlight with red border (is-invalid).
* Prevent form submission if any selected product is missing a valid qty.
* Prevent removing the last remaining row.
Submission Logic:
1. On submission:
A. Show a Bootstrap spinner while submitting.
B. Save order to "ORDER - LINE ITEMS" tab with:
* Current date
* Auto-generated sequential order number
* Product name, qty, and location
C. Show a Bootstrap modal with order number confirmation.
D. After modal closes, reset the form back to 5 empty rows.
Apps Script Backend (Code.gs):
1. doGet() to return the Index.html
2. getFormData() to return categories, product info, and locations
3. generateOrderNumber() to increment order number based on last row
4. submitOrder(orderData) to write each line item to the sheet.
Do you need an internal order form for your organization? In today's video, we're going to use ChatGPT to vibe code an order form that will take dropdowns from a Google Sheet, populate a HTML order form, and then take the submitted data and add it to a tab on the Google Sheet.
You can make a copy of the final Google Sheet & Script here: bit.ly/469ymYj
***** SAMPLE AI PROMPT *****
Build a Google Apps Script HTML web app that acts as an order form, backed by a Google Sheet with three tabs:
1. "ORDER - LINE ITEMS" (columns: Order Date, Order #, Product, Qty, Location)
2. "INVENTORY" (columns: Out of Stock, SKU, Category, Product Name, Image Link, Description)
3. "LOCATIONS" (columns: Location, Street Address, City, State, Zip, Email, Phone)
The app should:
* Frontend Design (HTML + Bootstrap):
* Use Bootstrap 5 for styling.
* Form container should have a medium gray background (#dee2e6), padding, and soft box-shadow.
* Include a Location dropdown at the top.
* Display a dynamic table with 5 default line item rows. Each row should include:
* Category dropdown (populated from INVENTORY)
* Dependent Product dropdown with thumbnail image and tooltip on hover (image + description)
* Quantity field (blank by default, placeholder “Enter Qty”)
* Delete button with a trash can icon (Bootstrap Icons)
* Allow adding more line items with a "+ Add Item" button.
Form Behavior:
* Auto-focus the qty input when a row is added.
* Validate qty input only if a product has been selected. If qty is missing or invalid, highlight with red border (is-invalid).
* Prevent form submission if any selected product is missing a valid qty.
* Prevent removing the last remaining row.
Submission Logic:
1. On submission:
A. Show a Bootstrap spinner while submitting.
B. Save order to "ORDER - LINE ITEMS" tab with:
* Current date
* Auto-generated sequential order number
* Product name, qty, and location
C. Show a Bootstrap modal with order number confirmation.
D. After modal closes, reset the form back to 5 empty rows.
Apps Script Backend (Code.gs):
1. doGet() to return the Index.html
2. getFormData() to return categories, product info, and locations
3. generateOrderNumber() to increment order number based on last row
4. submitOrder(orderData) to write each line item to the sheet.
