如何将网站新闻通讯表单数据提交至Google Sheets的独立Subscribe标签页

实现步骤 #

第一步：修改前端代码 #

1. 调整新闻通讯表单HTML

给表单加隐藏字段标记要提交到的表名，同时修改表单name避免和预约表单冲突：

<form method="POST" name="google-sheet-subscribe">
    <!-- 新增隐藏字段，告诉后端要写入Subscribe标签页 -->
    <input type="hidden" name="sheetName" value="Subscribe">
    <input type="text" name="subscribeEmail" placeholder="Your Email Address">
        <div class="gold-button small">
                    <button type="submit">Submit →</button>
                    <span class="bttn-border left virticle"></span>
                    <span class="bttn-border right virticle"></span>
                    <span class="bttn-border top horizontal"></span>
                    <span class="bttn-border bottom horizontal"></span>
       </div>
</form>

2. 调整预约表单HTML

给原来的预约表单也加对应的隐藏字段，同时修改表单name避免冲突：

<form method="POST" name="google-sheet-reserve">
    <!-- 这里的值填你原来预约表单提交到的标签页名称 -->
    <input type="hidden" name="sheetName" value="Reserve">
    <!-- 原有表单其他内容保持不变 -->
</form>

3. 调整前端JS脚本

原来的脚本只监听了一个表单，修改成同时监听两个表单：

<script>
    const scriptURL = 'https://script.google.com/macros/s/AKfycbzJA2cZGROFNCwLuPnJjECW21zXMZs8nT4Xo0Nzjy5ETlOVQ3gHgyjE3wzzmHky_0I_/exec'
    // 监听预约表单
    const reserveForm = document.forms['google-sheet-reserve']
    reserveForm.addEventListener('submit', e => {
        e.preventDefault()
        fetch(scriptURL, { method: 'POST', body: new FormData(reserveForm)})
            .then(() => {
                // 可自行添加预约表单提交成功的提示逻辑
                reserveForm.reset()
            })
            .catch(error => console.error('Error!', error.message))
    })
    // 监听新闻通讯表单
    const subscribeForm = document.forms['google-sheet-subscribe']
    subscribeForm.addEventListener('submit', e => {
        e.preventDefault()
        fetch(scriptURL, { method: 'POST', body: new FormData(subscribeForm)})
            .then(() => {
                // 可自行添加订阅成功的提示逻辑
                subscribeForm.reset()
            })
            .catch(error => console.error('Error!', error.message))
    })
</script>

第二步：修改Google Apps Script后端代码 #

打开你之前绑定Google Sheets的Apps Script项目，修改处理请求的逻辑：

function doPost(e) {
  const lock = LockService.getScriptLock();
  lock.tryLock(10000);
  try {
    // 打开你的目标表格
    const ss = SpreadsheetApp.openById('1OS-sm-UQf4tqstW5fMizy8OCjXiKNVBahGMf8IxIIq4');
    // 读取提交的表名参数，没传的话默认写入预约表
    const sheetName = e.parameter.sheetName || 'Reserve';
    const sheet = ss.getSheetByName(sheetName);
    const row = [];
    if(sheetName === 'Subscribe') {
      // 按Subscribe表的表头顺序写入数据，这里加了提交时间和邮箱两个字段
      row.push(new Date(), e.parameter.subscribeEmail);
    } else {
      // 原有预约表单的写入逻辑保持不变，按你之前的字段顺序填充即可
      row.push(new Date(), e.parameter.name, e.parameter.phone /* 其他原有字段依次添加 */);
    }
    // 写入表格最后一行
    sheet.appendRow(row);
    return ContentService.createTextOutput(JSON.stringify({result:'success'})).setMimeType(ContentService.MimeType.JSON);
  } catch (e) {
    return ContentService.createTextOutput(JSON.stringify({result:'error', error:e})).setMimeType(ContentService.MimeType.JSON);
  } finally {
    lock.releaseLock();
  }
}

第三步：配置与测试 #

1. 打开你的Google Sheets，新建名为Subscribe的标签页，第一行添加对应表头，示例：提交时间、订阅邮箱
2. 调整完Apps Script代码后，点击部署-新建部署，版本号加1，部署类型选Web应用，权限设置为任何人，甚至匿名用户，部署完成后确认Web应用URL和你前端用的scriptURL一致
3. 分别测试两个表单提交，确认数据分别写入对应的标签页即可

内容的提问来源于stack exchange，提问作者Obaid