Integrates HTML forms on static sites to Google Sheets via Apps Script with auto-retry, toast notifications, and contact fallbacks. Activates for form creation or sheet connections.
From cmnpx claudepluginhub tody-agent/codymaster --plugin cmThis skill is limited to using the following tools:
templates/apps-script.jstemplates/form-markup.htmltemplates/form-submit.jstemplates/toast.cssEnables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Connect HTML forms → Google Sheets via Google Apps Script. Auto-retry, toast UI, contact fallback on errors. Zero dependencies, works on any static site.
| Trigger | Action |
|---|---|
| User says "create form", "connect Google Sheet" | Activate this skill |
| User says "form broken", "submit not working" | Debug using Phase 4-5 |
| User says "add new form to page" | Start from Phase 2 |
| User says "form for another website" | Start from Phase 1 |
Phase 1: DISCOVER → Scan forms, identify fields, determine sheet structure
Phase 2: PLAN → Design sheet columns, map form fields, create deployment plan
Phase 3: BUILD → Generate Apps Script + Frontend JS + Toast CSS
Phase 4: INTEGRATE → Wire forms to JS, add CSS, deploy Apps Script
Phase 5: VERIFY → Test submit, test retry, test error fallback
🔴 Rule: NEVER skip Phase 1. Always read existing forms first.
Goal: Understand what forms exist and what fields they have.
Search for forms in the project:
grep -r "data-form-type\|onsubmit\|<form" --include="*.html" .
For each form found, extract:
| Info | How to Find |
|---|---|
| Form type | data-form-type attribute |
| Fields | <input name="...">, <select name="..."> |
| Submit handler | onsubmit attribute |
| Page URL | File path |
https://wa.me/15551234567)| # | Form Type | Pages | Fields | Target Sheet |
|---|-----------|-------|--------|-------------|
| 1 | massage | 7 | name, phone, branch, problem, time, package | Sheet Massage |
| 2 | course | 1 | name, phone, goal | Course Sheet |
Goal: Map form fields → Sheet columns → Apps Script params.
For each sheet, define columns in order:
| Column | Source | Always Include |
|---|---|---|
| Timestamp | new Date() — auto | ✅ Yes |
| (form fields) | e.parameter.xxx | From inventory |
| Page Source | e.parameter.url | ✅ Yes |
| Element | Convention |
|---|---|
| Sheet tab name | Data |
| Form attribute | data-form-type="<type>" |
| Hidden URL field | <input type="hidden" name="url" value=""> |
| JS global function | window.submitToGoogleSheet |
See
templates/apps-script.jsfor the full template.
Key rules:
doPost(e) — NOT doGettry/catch{status: "success"} or {status: "error", message: "..."}sheet.appendRow([...]) orderSHEET_NAME constantSee
templates/form-submit.jsfor the full template.
Key features:
| Feature | Detail |
|---|---|
| Auto-retry | 3 attempts, exponential backoff (1s → 2s → 4s) |
| Toast UI | Success (green), Error (red), Retrying (amber) |
| Phone validation | Vietnamese format: /^0\d{8,10}$/ |
| Button states | "Submitting..." → "Retrying (X/3)..." → reset |
| CORS handling | Handles opaque responses from Apps Script |
| Fallback | Zalo button in error toast |
| Auto-dismiss | Success: 6s, Error: 15s, Retrying: 10s |
See
templates/toast.cssfor the full template.
3 variants: --success, --error, --retrying
See
templates/form-markup.htmlfor examples.
Required attributes:
<form data-form-type="TYPE" onsubmit="window.submitToGoogleSheet(event)">
<input type="hidden" name="url" value="">
<!-- form fields with name="..." -->
<button type="submit">Submit Text</button>
</form>
design-system.css)js/form-handler.jsdata-form-type="..." attributeonsubmit="window.submitToGoogleSheet(event)"<input type="hidden" name="url" value="">name="..." matching Apps Script params| Setting | Location | Default |
|---|---|---|
| Apps Script URLs | JS URLS object | placeholder |
| Fallback contact | Toast Zalo link | https://zalo.me/... |
| Max retries | fetchWithRetry arg | 3 |
| Phone regex | Validation block | /^0\d{8,10}$/ |
| Toast auto-dismiss | showFormToast timeouts | 6s/15s/10s |
| Success message | .then() block | Customizable |
| Error message | .catch() block | Customizable |
| # | Test Case | Expected | Status |
|---|---|---|---|
| 1 | Submit valid form | Toast success (green) + Zalo opens | |
| 2 | Submit invalid phone | Toast error "Invalid phone number" | |
| 3 | Network offline | 3 retries → Toast error with Zalo button | |
| 4 | Check Google Sheet | New row appears with correct data | |
| 5 | Button states | Disabled during submit, resets after | |
| 6 | Toast close button | Toast disappears on click | |
| 7 | Mobile responsive | Toast visible above sticky CTA | |
| 8 | Multiple forms same page | Each form submits independently |
script.google.com## Form Integration Test Report
**Date:** YYYY-MM-DD
**Pages tested:** X/Y
| Page | Form Type | Submit | Retry | Fallback | Sheet |
|------|-----------|--------|-------|----------|-------|
| index.html | massage | ✅ | ✅ | ✅ | ✅ |
| khoa-hoc.html | course | ✅ | ✅ | ✅ | ✅ |
**Issues found:** None / [list issues]
**Resolution:** [fixes applied]
| ❌ Don't | ✅ Do |
|---|---|
Use alert() for feedback | Use toast notifications |
| No retry on failure | Auto-retry 3x with backoff |
| Silently fail | Show error + contact fallback |
| Hardcode form URLs | Use config object (URLS) |
| Skip phone validation | Validate before submit |
Forget name attribute | Every input MUST have name |
Use doGet for form submit | Use doPost only |
| Multiple submit handlers | One shared submitToGoogleSheet |
| File | Purpose |
|---|---|
templates/apps-script.js | Google Apps Script doPost handler |
templates/form-submit.js | Frontend JS with retry + toast |
templates/toast.css | Toast notification CSS component |
templates/form-markup.html | HTML form examples |
| Need | Skill |
|---|---|
| Form UI/UX design | @[skills/cm-ux-master] |
| SEO for forms | @[skills/cm-dockit] |
| Form security | @[skills/vulnerability-scanner] |
| Deployment | @[skills/deployment-procedures] |