將Google Sheets做為自製線上表單的資料儲存

Web 表單送出資料並儲存到後端的方法有許多種，主要可分為以下幾類：

1. 儲存到資料庫（Database）

適用場景：需要長期存取、查詢、大量數據處理
技術需求：伺服器 + 資料庫（SQL 或 NoSQL）

常見方法

• MySQL / PostgreSQL / MariaDB（關聯式資料庫）
  • 需要後端語言（PHP、Node.js、Python、Java 等）接收表單資料，並存入資料庫
• MongoDB / Firebase Firestore（NoSQL 資料庫）
  • 適合動態資料，例如即時聊天、日誌記錄等

簡單流程

1. 前端 使用 AJAX/Fetch 提交表單資料
2. 後端（如 PHP, Node.js, Python） 處理資料
3. 資料庫（MySQL, MongoDB） 存儲資料

範例（PHP + MySQL）

<?php
$conn = new mysqli("localhost", "username", "password", "database");

$name = $_POST["name"];
$email = $_POST["email"];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
$conn->query($sql);
$conn->close();
?>

2. 儲存到 Google 表單（Google Forms + Google Sheets）

適用場景：小型表單、快速收集資料、無需自建伺服器
技術需求：Google Forms + Google Apps Script

實現方式

1. 直接使用 Google Forms 提交
   • 建立 Google Forms，取得 formResponse 連結，前端 <form> 直接提交資料（無法自訂回應）
2. 透過 Google Apps Script（GAS）+ AJAX
   • 自訂 Google Apps Script 接收資料並存入 Google Sheets（可客製化回應）

範例（AJAX 送資料到 GAS Web API）

fetch("你的Google Apps Script URL", {
    method: "POST",
    body: new FormData(document.getElementById("form"))
})
.then(response => response.text())
.then(data => alert("成功提交：" + data));

3. 儲存到 Firebase（Google 雲端資料庫）

適用場景：即時應用、無後端開發需求、行動應用整合
技術需求：Firebase Database 或 Firestore

範例（Firebase Firestore）

import { getFirestore, collection, addDoc } from "firebase/firestore"; 

const db = getFirestore();
async function saveData() {
    await addDoc(collection(db, "users"), {
        name: "張三",
        email: "zhangsan@example.com"
    });
}

4. 儲存到 JSON 檔案（後端 API 存 JSON）

適用場景：輕量級應用、無資料庫需求、可用於靜態網站
技術需求：後端（Node.js/Python/PHP）儲存 JSON 檔案

範例（Node.js Express）

const fs = require("fs");
const express = require("express");
const app = express();
app.use(express.json());

app.post("/save", (req, res) => {
    let data = req.body;
    fs.writeFileSync("data.json", JSON.stringify(data, null, 2));
    res.send("儲存成功！");
});

5. 直接寄 Email 儲存（Mail Server）

適用場景：聯絡表單、客服回覆、不需要長期存取
技術需求：SMTP 伺服器（如 Gmail、SendGrid）

範例（PHP 使用 PHPMailer 寄信）

use PHPMailer\PHPMailer\PHPMailer;

$mail = new PHPMailer();
$mail->isSMTP();
$mail->Host = "smtp.gmail.com";
$mail->SMTPAuth = true;
$mail->Username = "your-email@gmail.com";
$mail->Password = "your-password";
$mail->setFrom("your-email@gmail.com", "Web Form");
$mail->addAddress("recipient@example.com");
$mail->Subject = "新表單提交";
$mail->Body = "姓名: $_POST[name]\nEmail: $_POST[email]";
$mail->send();

6. 透過 No-Code 服務（如 Airtable / Zapier）

適用場景：無需寫程式、快速部署
技術需求：Airtable API 或 Zapier Webhook

範例（Airtable API 直接存資料）

fetch("https://api.airtable.com/v0/YOUR_BASE_ID/Table1", {
    method: "POST",
    headers: {
        "Authorization": "Bearer YOUR_API_KEY",
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        fields: { Name: "張三", Email: "zhangsan@example.com" }
    })
});

結論：如何選擇？

推薦選擇

• 如果只是收集資料 → Google Forms + Google Sheets
• 如果有後端需求 → MySQL + PHP / Node.js
• 如果要即時同步 → Firebase Firestore
• 如果無伺服器但想存入 DB → Airtable / Zapier
• 如果要寄 Email 通知 → SMTP 方式

哪一種方式最符合你的需求呢？😃

自製Web表單，將資料送至Google Sheets儲存

如果你想要自己設計 HTML/CSS/JavaScript 表單，但又希望資料能儲存到 Google Sheets，那麼最好的方式是透過 Google Apps Script（GAS），讓你的表單透過 AJAX 提交資料，並由 GAS 代為存入 Google Sheets。

這種方式讓你可以完全自訂前端畫面，而且後端無需額外伺服器，直接用 Google Sheets 作為資料庫。

完整流程

1. 建立 Google Sheets
2. 撰寫 Google Apps Script（GAS）當作 API
3. 前端 HTML/CSS/JavaScript 表單
4. AJAX 提交資料到 GAS
5. GAS 接收資料並寫入 Google Sheets

1️⃣ 建立 Google Sheets

1. 開啟 Google Sheets
2. 建立新試算表，取名為 「表單回應」
3. 在 A1、B1、C1 輸入標題，例如：
   姓名 | Email | 訊息
------|------------------|-----
王小明 | test@example.com | 這是我的留言
4. 記下 試算表網址，稍後會用到。

2️⃣ 撰寫 Google Apps Script（GAS）作為 API

1. 在 Google Sheets 「擴充功能」 → 「Apps Script」
2. 刪除預設程式碼，貼上以下 GAS 代碼：

function doPost(e) {
  var sheet = SpreadsheetApp.openById("你的 Google Sheets ID").getActiveSheet();
  var data = JSON.parse(e.postData.contents);
  
  sheet.appendRow([data.name, data.email, data.message]);

  return ContentService.createTextOutput("成功儲存！")
      .setMimeType(ContentService.MimeType.TEXT);
}

3. 如何取得 Google Sheets ID？
   • 試算表網址類似這樣： https://docs.google.com/spreadsheets/d/1A2B3C4D5E6F7G8H9I/edit
   • 把 1A2B3C4D5E6F7G8H9I 填入上方 openById()
4. 點擊 「部署」 → 「新部署」
   • 選擇 「Web 應用程式」
   • 允許任何人（Everyone）存取
   • 點擊部署，取得 API URL（稍後要用）

3️⃣ 自訂 HTML/CSS 表單

這段程式碼是美觀的 Bootstrap 表單，並且可以 AJAX 提交資料到剛剛的 GAS API。

index.html

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自訂 Google Sheets 表單</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script>
        function submitForm() {
            var formData = {
                name: document.getElementById("name").value,
                email: document.getElementById("email").value,
                message: document.getElementById("message").value
            };

            fetch("你的GAS API URL", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(formData)
            })
            .then(response => response.text())
            .then(data => {
                alert("表單提交成功！");
                document.getElementById("myForm").reset();
            })
            .catch(error => console.error("錯誤:", error));
        }
    </script>
</head>
<body class="container mt-5">
    <h2>聯絡我們</h2>
    <form id="myForm" onsubmit="event.preventDefault(); submitForm();">
        <div class="mb-3">
            <label class="form-label">姓名</label>
            <input type="text" id="name" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" id="email" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">訊息</label>
            <textarea id="message" class="form-control" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</body>
</html>

4️⃣ AJAX 提交到 GAS（Google Sheets）

這部分的 JavaScript 代碼會：

1. 取得表單輸入值
2. 透過 fetch() 發送 JSON 格式資料到 GAS API
3. GAS 會將資料存入 Google Sheets
4. 成功後會跳出 「表單提交成功！」 提示

🔥 最終效果

• 完全 客製化表單（可以設計任何風格）
• 免伺服器（Google Sheets 直接當資料庫）
• 自動存入試算表
• 可擴充性強（GAS 可寫更多邏輯）

✅ 為什麼這種方法適合你？

這樣的解法，既能擁有 Google Sheets 的便利性，又能保有網站的專業外觀，適合需要簡單但專業的資料收集方案！🎉