Google Apps Script 寫入 Google Sheet 入門

程式碼重點

• doPost 函數：處理表單 POST 請求，寫入 Google Sheet
• SpreadsheetApp.openById()：使用正確的試算表 ID
• appendRow()：將資料寫入新的一行
• CORS 標頭：雖然 TextOutput 無法用 setHeader，但 GAS Web App 會自動處理簡單請求

實際 GAS 程式碼範例

function doPost(e) {
  try {
    var sheet = SpreadsheetApp.openById('你的Spreadsheet_ID').getActiveSheet();
    Logger.log('收到 POST 請求');
    Logger.log('e.parameter: ' + JSON.stringify(e.parameter));
    var data = e.parameter;
    var row = [
      data.name || '',
      data.email || '',
      data.phone || '',
      data.message || '',
      new Date()
    ];
    sheet.appendRow(row);
    Logger.log('已寫入試算表');
    
    return ContentService.createTextOutput(
      JSON.stringify({result: "success"})
    ).setMimeType(ContentService.MimeType.JSON);
  } catch(error) {
    Logger.log('錯誤: ' + error.toString());
    return ContentService.createTextOutput(
      JSON.stringify({result: "error", message: error.toString()})
    ).setMimeType(ContentService.MimeType.JSON);
  }
}

function doGet(e) {
  return ContentService.createTextOutput("此服務僅支援 POST 請求。");
}

權限授權

• 第一次寫入必須手動授權：在 GAS 編輯器執行測試函數，點選「允許」
• Web App 部署權限：「任何人（甚至未登入者）」可存取

HTML 表單格式

<form action="https://script.google.com/macros/s/你的ID/exec" method="POST" target="hidden_iframe">
  <input name="name" ...>
  <input name="email" ...>
  <!-- 其他欄位 -->
</form>

完整實務範例：邀請演講表單

// GAS 端程式碼
function doPost(e) {
  try {
    var sheet = SpreadsheetApp.openById('1ubnN1u18UGJfFXNMXbeUyPWKe5Gmj0JI11ozei-N1hc').getActiveSheet();
    Logger.log('收到邀請演講表單');
    var data = e.parameter;
    var row = [
      data.name || '',           // 邀請人姓名
      data.title || '',          // 職稱與單位
      data.email || '',          // 聯絡信箱
      data.phone || '',          // 聯絡電話
      data.orgurl || '',         // 所屬機構網址
      data.eventname || '',      // 活動名稱
      data.eventdate || '',      // 活動日期
      data.eventtime || '',      // 活動時間
      data.eventplace || '',     // 活動地點
      data.topic || '',          // 邀請主題
      data.duration || '',       // 預期講授長度
      data.audience || '',       // 對象與人數
      data.fee || '',            // 是否提供講師費
      data.invoice || '',        // 是否需要開立發票
      data.desc || '',           // 說明
      new Date()                 // 提交時間
    ];
    sheet.appendRow(row);
    Logger.log('已寫入試算表');
    
    // 寄信通知
    var mailBody = "有新邀請演講表單：\\n姓名：" + data.name + "\\n信箱：" + data.email;
    MailApp.sendEmail({
      to: "your-email@gmail.com",
      subject: "新邀請演講表單",
      body: mailBody
    });
    
    return ContentService.createTextOutput(
      JSON.stringify({result: "success"})
    ).setMimeType(ContentService.MimeType.JSON);
  } catch(error) {
    Logger.log('錯誤: ' + error.toString());
    return ContentService.createTextOutput(
      JSON.stringify({result: "error", message: error.toString()})
    ).setMimeType(ContentService.MimeType.JSON);
  }
}

此範例展示如何處理複雜的表單資料，包含資料驗證、寫入試算表、寄送通知等功能。

關鍵設定

• method="POST"：確保觸發 GAS 的 doPost 而非 doGet
• action：必須是已部署的 Web App `/exec` 網址
• name 屬性：必須與 GAS 端的 `data.name`、`data.email` 等完全對應

解決方案

• 使用純 HTML 表單提交：不用 JavaScript fetch/ajax
• 避免 application/json：用預設的 form-urlencoded 格式
• target="hidden_iframe"：避免頁面跳轉，保持使用者體驗

1. 使用者填寫表單 → 點擊送出
2. 瀏覽器發送 POST 請求 → 到 GAS Web App
3. GAS doPost 接收資料 → 從 `e.parameter` 取得
4. 寫入 Google Sheet → 使用 `sheet.appendRow()`
5. 回傳成功訊息 → 前端顯示 alert

資料未寫入

• 檢查 GAS 權限授權
• 確認 Spreadsheet ID 正確
• 檢查表單欄位 name 對應

CORS 錯誤

• 改用純 HTML 表單
• 不用 JavaScript fetch
• 確認 Web App 部署權限

觸發 doGet 而非 doPost

• 確認 `method="POST"`
• 檢查 action 網址是否正確
• 移除會攔截表單的 JavaScript

GAS 執行記錄

• 查看「收到 POST 請求」日誌
• 檢查「已寫入試算表」訊息
• 確認沒有錯誤訊息

前端測試

• 檢查表單是否真的送出
• 確認沒有 JavaScript 錯誤
• 驗證欄位資料正確傳送