Google Sheets實作：高效率 Landing Page 名單收集

|

第一階段：建立 Google Sheets 後端「傳送門」

1. 準備試算表

  1. 新建一個 Google 試算表。
  2. 在第一列設定標題：A1: 姓名、B1: 電子信箱、C1: 建立日期。

2. 部署 Apps Script

  1. 點擊選單 「擴充功能」 > 「Apps Script」。
  2. 清空原本程式碼，貼入以下腳本：

JavaScript

function doPost(e) {
  try {
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    var data = JSON.parse(e.postData.contents);
    
    // 寫入資料 (順序：姓名, 信箱, 目前時間)
    sheet.appendRow([
      data.name, 
      data.email, 
      new Date() 
    ]);

    return ContentService.createTextOutput(JSON.stringify({ "result": "success" }))
      .setMimeType(ContentService.MimeType.JSON);
      
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({ "result": "error", "message": error.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

3. 部署為網頁應用程式

  1. 點擊右上角 「部署」 > 「新部署」。
  2. 類型選擇 「網頁應用程式」。
  3. 執行身分：「我」 / 誰有權存取：「所有人」。
  4. 完成授權後，複製產生的「網頁應用程式網址」（後面會用到）。

第二階段：建構前端輕量化表單

將以下程式碼存為 index.html。這段程式碼包含美化的 CSS 以及具備 Honeypot（防機器人陷阱） 的傳送邏輯。

HTML

<script>
    const GOOGLE_SCRIPT_URL = 'YOUR_API_URL'; 
</script>

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root { --p-color: #007bff; --s-color: #28a745; }
        body { font-family: sans-serif; display: flex; justify-content: center; padding: 40px; background: #f8f9fa; }
        .card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%; max-width: 380px; }
        .input-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
        button { width: 100%; padding: 12px; background: var(--p-color); color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
        button:disabled { background: #ccc; }
        .msg { margin-top: 15px; text-align: center; }
    </style>
</head>
<body>

<div class="card">
    <h2>預約諮詢</h2>
    <form id="leadForm">
        <div class="input-group">
            <label>您的姓名</label>
            <input type="text" id="name" required>
        </div>
        <div class="input-group">
            <label>電子信箱</label>
            <input type="email" id="email" required>
        </div>
        
        <div style="display:none;">
            <input type="text" id="hp" tabindex="-1" autocomplete="off">
        </div>

        <button type="submit" id="subBtn">立即送出</button>
    </form>
    <div id="status" class="msg"></div>
</div>

<script>
    const form = document.getElementById('leadForm');
    const btn = document.getElementById('subBtn');
    const status = document.getElementById('status');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        // 機器人檢查
        if (document.getElementById('hp').value) return;

        btn.disabled = true;
        btn.textContent = '傳送中...';

        const data = {
            name: document.getElementById('name').value,
            email: document.getElementById('email').value
        };

        try {
            await fetch(GOOGLE_SCRIPT_URL, {
                method: 'POST',
                mode: 'no-cors',
                body: JSON.stringify(data)
            });
            status.innerHTML = '<span style="color:var(--s-color)">✅ 成功！我們已收到您的資訊。</span>';
            form.reset();
        } catch (err) {
            status.innerHTML = '<span style="color:red">❌ 發生錯誤，請稍後再試。</span>';
        } finally {
            btn.disabled = false;
            btn.textContent = '立即送出';
        }
    });
</script>
</body>
</html>

🛠️ 維護與擴充

  1. 增加欄位：若要增加欄位（如：電話），只需在 HTML 增加 Input，並在 Apps Script 的 sheet.appendRow 陣列中對應加入即可。
  2. 安全性：此方案適合一般名單收集。若涉及高機密資料，建議建立專門的後端 API。
  3. 效能優化：本表單僅約 3KB，對 Landing Page 的載入速度（LCP）幾乎無負擔。
最新文章