8c2bf3d303
4.9a: Contact.astro (v6-contact enhanced)
- 2 variants: 'prompt' (1 input + ENTER, for home) + 'full' (5 fields, for /contact)
- Smart-parses prompt input (phone vs name detection)
- Toast feedback on submit (success/error, 5s auto-hide)
- Dev-mode aware (no endpoint = console.log + 'dev mode' toast)
4.9b: apps-script/contact-form/ (USER DEPLOYS)
- Code.gs: doPost() handler → 3 actions:
1. Append to Google Sheet (SHEET_ID from Script Properties)
2. Send email via MailApp to RECIPIENT_EMAIL
3. Send LINE Notify via UrlFetchApp
- Returns {ok, id} or {ok:false, error} as JSON
- Includes testDoPost() for testing in Apps Script editor
- README.md: 6-step deploy guide (Script Properties + Sheet + LINE token)
with security notes + cost breakdown
4.9c: src/lib/contact-submit.ts
- Reads PUBLIC_CONTACT_ENDPOINT from .env
- Empty/missing = dev mode (console.log + 300ms mock latency)
- Set = POST JSON to endpoint
- Exports submitContact() + isDevMode() for Contact.astro to use
Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 4.9a-c
141 lines
5.0 KiB
Markdown
141 lines
5.0 KiB
Markdown
# Contact Form Backend — Google Apps Script
|
|
|
|
This is the backend for the contact form on the MoreminiMore website.
|
|
|
|
When someone submits the form, this Apps Script:
|
|
1. **Logs** the submission to a Google Sheet (audit trail)
|
|
2. **Emails** the submission to `contact@moreminimore.com` (your Google Workspace)
|
|
3. **Sends** a LINE Notify to your phone
|
|
|
|
The user (you) deploys this script. Hermes Agent cannot deploy it for you — it requires access to your Google account.
|
|
|
|
---
|
|
|
|
## Prerequisites
|
|
|
|
- A Google account (use `contact@moreminimore.com` or any Google Workspace account)
|
|
- A LINE Notify token (get one at <https://notify-bot.line.me/> — log in → My page → Generate token)
|
|
|
|
---
|
|
|
|
## Setup (5 minutes)
|
|
|
|
### Step 1: Create the Apps Script project
|
|
|
|
1. Go to <https://script.google.com/start>
|
|
2. Click **New project** (or "โปรเจ็กต์ใหม่" in Thai)
|
|
3. Rename the project (top-left) to `moreminimore-contact-form`
|
|
4. Delete the default `function myFunction() {}` code
|
|
5. Open `Code.gs` from this folder in your text editor
|
|
6. **Copy the entire contents** and **paste** into the Apps Script editor
|
|
7. Click 💾 (Save) or Ctrl+S
|
|
|
|
### Step 2: Set Script Properties
|
|
|
|
1. Click **Project Settings** (⚙️ gear icon on the left)
|
|
2. Scroll down to **Script Properties**
|
|
3. Click **Add script property** and add these 3:
|
|
|
|
| Property | Value | Where to get it |
|
|
|---|---|---|
|
|
| `SHEET_ID` | (Google Sheet ID) | See Step 3 below |
|
|
| `LINE_NOTIFY_TOKEN` | (LINE token) | <https://notify-bot.line.me/> → My page → Generate token → Copy |
|
|
| `RECIPIENT_EMAIL` | `contact@moreminimore.com` | Just type your email |
|
|
|
|
### Step 3: Create the Google Sheet
|
|
|
|
1. Go to <https://sheets.google.com/create>
|
|
2. Rename to `moreminimore-contact-log` (or whatever you like)
|
|
3. In row 1, add these headers (one per cell, A1 through H1):
|
|
```
|
|
timestamp | name | phone | email | service | message | variant | userAgent
|
|
```
|
|
4. **Get the Sheet ID** from the URL:
|
|
- URL looks like: `https://docs.google.com/spreadsheets/d/1aBcD...XyZ/edit`
|
|
- The `1aBcD...XyZ` part is the **SHEET_ID** — copy it
|
|
5. Paste it into Script Properties → `SHEET_ID` value
|
|
|
|
### Step 4: Test the script (optional but recommended)
|
|
|
|
1. In the Apps Script editor, select function `testDoPost` from the dropdown (next to the debug ▶ button)
|
|
2. Click **Run** (▶)
|
|
3. If prompted, authorize the script (review permissions → Allow)
|
|
4. Check:
|
|
- The Google Sheet has a new row at the bottom
|
|
- The recipient email got a new message
|
|
- Your LINE got a notification
|
|
5. Check **Execution log** (View → Logs) for any errors
|
|
|
|
### Step 5: Deploy as Web App
|
|
|
|
1. Click **Deploy** (top-right) → **New deployment**
|
|
2. Click the ⚙️ gear icon → select **Web app**
|
|
3. Configure:
|
|
- **Description**: `moreminimore contact form v1`
|
|
- **Execute as**: `Me (your-email@gmail.com)`
|
|
- **Who has access**: `Anyone` ← important, otherwise form can't reach it
|
|
4. Click **Deploy**
|
|
5. You may be asked to authorize again — click **Review permissions** → choose your account → **Allow**
|
|
6. **Copy the Web app URL** — it looks like:
|
|
```
|
|
https://script.google.com/macros/s/AKfycbz.../exec
|
|
```
|
|
|
|
### Step 6: Wire the URL into the website
|
|
|
|
1. Open `moreminimore-astroreal/.env` (create it if it doesn't exist)
|
|
2. Add this line (paste your URL):
|
|
```
|
|
PUBLIC_CONTACT_ENDPOINT=https://script.google.com/macros/s/AKfycbz.../exec
|
|
```
|
|
3. Save the file
|
|
4. Rebuild the site: `npm run build`
|
|
5. Deploy (or push to your host)
|
|
|
|
---
|
|
|
|
## Verifying it works
|
|
|
|
After deploy, visit the website, fill the form, hit submit.
|
|
|
|
You should see:
|
|
- ✅ Toast: "✓ ส่งแล้ว เราจะติดต่อกลับภายใน 24 ชม."
|
|
- ✅ New row in the Google Sheet
|
|
- ✅ Email in your inbox
|
|
- ✅ LINE notification on your phone
|
|
|
|
If something fails, check:
|
|
- **Apps Script Execution Log** (Executions tab on the left) — shows errors
|
|
- **Sheet ID** is correct (no extra spaces, full ID)
|
|
- **LINE token** is active (revoke + regenerate if needed)
|
|
- **"Who has access"** is set to `Anyone` on the deployment
|
|
|
|
---
|
|
|
|
## Updating the script later
|
|
|
|
When you change `Code.gs`:
|
|
1. Save in the editor
|
|
2. **Deploy** → **Manage deployments** → ✏️ (edit) → **Version: New version** → **Deploy**
|
|
3. The Web app URL stays the same — no need to update `.env`
|
|
|
|
---
|
|
|
|
## Security notes
|
|
|
|
- The web app URL is not secret — anyone who knows it can submit
|
|
- But it has no destructive power (only appends rows + sends email/notify to you)
|
|
- If you receive spam, you can revoke the LINE token + change the deployment URL
|
|
- Consider adding reCAPTCHA later if spam becomes a problem
|
|
|
|
---
|
|
|
|
## Cost
|
|
|
|
- **Google Apps Script**: free (1-hour quota, plenty for contact forms)
|
|
- **Google Sheets**: free up to 10M cells
|
|
- **MailApp**: free for ~100 emails/day per user
|
|
- **LINE Notify**: free, unlimited messages, but discontinued March 2025 in some regions — check status at <https://notify-bot.line.me/>
|
|
|
|
If LINE Notify is shut down, swap the LINE call for a Telegram bot or Discord webhook (same `UrlFetchApp.fetch` pattern).
|