You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助：为3个HTML表单适配Google Apps Script对接Google Sheets数据库

avatar
云上老周
2026-7-16
基于Google Apps Script实现表单数据存入Google Sheets方案

问题背景

网站包含3个表单，原常规提交方式导致数据频繁进入垃圾邮件，且不愿使用验证码，需通过Google Apps Script将表单数据存储到Google Sheets作为数据库。

实现步骤

1. 准备Google Sheets数据库

创建新的Google Sheets文件，添加3个工作表，分别命名为联系表单、配送请求、司机信息，并在每个工作表第一行设置对应表头：

  • 联系表单表头：姓名, 邮箱, 获知渠道, 留言, 提交时间
  • 配送请求表头：姓名, 邮箱, 地址, 出发地, 目的地, 手机号, 留言, 提交时间
  • 司机信息表头：司机全名, 护照号, 车辆品牌, 马匹注册号, 拖车类型, 拖车注册号, 里程数, GIT保险, 提交时间

2. 编写Google Apps Script

打开Google Sheets，点击扩展程序→Apps 脚本，清空默认代码后粘贴以下脚本：

function doPost(e) {
  // 蜜罐验证：若_honey字段有内容，判定为垃圾邮件直接返回
  if (e.parameter._honey) {
    return ContentService.createTextOutput(JSON.stringify({"status":"error", "message":"垃圾邮件拦截"})).setMimeType(ContentService.MimeType.JSON);
  }

  try {
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    let sheet;
    const formType = e.parameter.form_type;

    // 根据表单类型匹配对应工作表
    switch(formType) {
      case "contact":
        sheet = ss.getSheetByName("联系表单");
        const contactData = [
          e.parameter.name,
          e.parameter.email,
          e.parameter.subject,
          e.parameter.message,
          new Date().toLocaleString()
        ];
        sheet.appendRow(contactData);
        break;
      case "delivery":
        sheet = ss.getSheetByName("配送请求");
        const deliveryData = [
          e.parameter.fullname,
          e.parameter.email,
          e.parameter.address,
          e.parameter.departure_location,
          e.parameter.destination_location,
          e.parameter.phone_number,
          e.parameter.message,
          new Date().toLocaleString()
        ];
        sheet.appendRow(deliveryData);
        break;
      case "driver":
        sheet = ss.getSheetByName("司机信息");
        const driverData = [
          e.parameter.driversfullname,
          e.parameter.driverspassport,
          e.parameter.make,
          e.parameter.horsereg,
          e.parameter.trailertype,
          e.parameter.trailerreg,
          e.parameter.mileage,
          e.parameter.gitcover,
          new Date().toLocaleString()
        ];
        sheet.appendRow(driverData);
        break;
      default:
        return ContentService.createTextOutput(JSON.stringify({"status":"error", "message":"无效表单类型"})).setMimeType(ContentService.MimeType.JSON);
    }

    return ContentService.createTextOutput(JSON.stringify({"status":"success", "message":"提交成功"})).setMimeType(ContentService.MimeType.JSON);
  } catch(error) {
    return ContentService.createTextOutput(JSON.stringify({"status":"error", "message":"提交失败：" + error.message})).setMimeType(ContentService.MimeType.JSON);
  }
}

3. 部署Web应用

  1. 在脚本编辑器中点击部署→新部署
  2. 点击齿轮图标，选择Web应用
  3. 配置参数：
    • 部署类型：Web应用
    • 执行：选择我
    • 谁可以访问：选择任何人，甚至匿名
  4. 点击部署，完成授权后复制生成的Web应用URL

4. 修改HTML表单代码

将每个表单的action替换为上述Web应用URL，添加隐藏字段form_type标识表单类型，保留原蜜罐字段：

第一个表单（联系表单）修改后代码

<form class="custom-form" role="form" action="你的Web应用URL" method="post">
  <!-- 蜜罐 -->
  <input type="text" name="_honey" style="display:none;">
  <!-- 表单类型标识 -->
  <input type="hidden" name="form_type" value="contact">

  <div class="row">
    <div class="col-lg-4 col-md-6 col-12 my-2">
      <label class="mb-2" for="name">Full Name</label>
      <input type="text" name="name" id="name" class="form-control" required>
    </div>

    <div class="col-lg-4 col-md-6 col-12 my-2">
      <label class="mb-2" for="email">Email Address</label>
      <input type="email" name="email" id="email" pattern="[^ @]@[^ @]" class="form-control" required>
    </div>

    <div class="col-lg-4 col-md-6 col-12 my-2">
      <label class="mb-2" for="subject">How did you know about us?</label>
      <select class="form-select form-control" name="subject" id="subject">
        <option selected>Choose a subject</option>
        <option value="web+search">Website Searches</option>
        <option value="social+media">Social Media</option>
        <option value="others">Others</option>
      </select>
    </div>

    <div class="col-12 my-2">
      <label class="mb-2" for="message">Tell us about the Delivery</label>
      <textarea class="form-control" rows="5" id="message" name="message"></textarea>
      <button type="submit" class="form-control mt-4">Submit</button>
    </div>
</form>

第二个表单（配送请求）修改后代码

<form action="你的Web应用URL" method="POST">
  <!-- 蜜罐 -->
  <input type="text" name="_honey" style="display:none;">
  <!-- 表单类型标识 -->
  <input type="hidden" name="form_type" value="delivery">
  
  <div class="input-box">
    <input type="text" name="fullname" placeholder="Enter your full name" required>
  </div>
  <div class="input-box">
    <input type="text" name="email" placeholder="Enter your email" required>
  </div>
  <div class="input-box">
    <input type="text" name="address" placeholder="Enter your address" required>
  </div>
  <div class="input-box">
    <input type="text" name="departure_location" placeholder="Departure Location" required>
  </div>
  <div class="input-box">
    <input type="text" name="destination_location" placeholder="Destination Location" required>
  </div>
  <div class="input-box">
    <input type="text" name="phone_number" placeholder="Phone Number" required>
  </div>
  <div class="col-12 my-2">
    <textarea class="form-control" rows="5" id="message" name="message" placeholder="Write to us..."></textarea>
  </div>
  <div class="input-box button">
    <input type="submit" value="Submit">
  </div>
  <span id="client-msg"></span>
</form>

第三个表单（司机信息）修改后代码

<form action="你的Web应用URL" method="POST">
  <!-- 蜜罐 -->
  <input type="text" name="_honey" style="display:none;">
  <!-- 表单类型标识 -->
  <input type="hidden" name="form_type" value="driver">
  
  <div class="input-box">
    <input type="text" name="driversfullname" placeholder="Drivers full name" required>
  </div>
  <div class="input-box">
    <input type="text" name="driverspassport" placeholder="Drivers Passport Number" required>
  </div>
  <div class="input-box">
    <input type="text" name="make" placeholder="Make" required>
  </div>
  <div class="input-box">
    <input type="text" name="horsereg" placeholder="Horse Registration" required>
  </div>
  <div class="input-box">
    <input type="text" name="trailertype" placeholder="Trailer Type" required>
  </div>
  <div class="input-box">
    <input type="text" name="trailerreg" placeholder="Trailer Registration" required>
  </div>
  <div class="input-box">
    <input type="text" name="mileage" placeholder="Mileage" required>
  </div>
  <div class="input-box">
    <input type="text" name="gitcover" placeholder="GIT Cover" required>
  </div>

  <div class="input-box button">
    <input type="submit" value="Submit">
  </div>
  <span id="partner-msg"></span>
</form>

5. 可选：添加前端无刷新提交反馈

添加JavaScript实现无刷新提交并显示状态，提升用户体验：

// 处理联系表单提交
document.querySelector('.custom-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  try {
    const response = await fetch(this.action, {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    alert(result.message);
    result.status === 'success' && this.reset();
  } catch(error) {
    alert('提交失败，请重试');
  }
});

// 处理配送请求表单提交
document.querySelector('input[name="form_type"][value="delivery"]').closest('form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const msgElement = document.getElementById('client-msg');
  try {
    const response = await fetch(this.action, {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    msgElement.textContent = result.message;
    msgElement.style.color = result.status === 'success' ? 'green' : 'red';
    result.status === 'success' && this.reset();
  } catch(error) {
    msgElement.textContent = '提交失败，请重试';
    msgElement.style.color = 'red';
  }
});

// 处理司机信息表单提交
document.querySelector('input[name="form_type"][value="driver"]').closest('form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const msgElement = document.getElementById('partner-msg');
  try {
    const response = await fetch(this.action, {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    msgElement.textContent = result.message;
    msgElement.style.color = result.status === 'success' ? 'green' : 'red';
    result.status === 'success' && this.reset();
  } catch(error) {
    msgElement.textContent = '提交失败，请重试';
    msgElement.style.color = 'red';
  }
});

内容的提问来源于stack exchange，提问作者just a learner

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.16 14:26:57