如何通过Google Apps Script实现HTML表单提交后跳转至感谢页

前提准备 #

确认你已在Google Apps Script项目中创建了success.html自定义成功页面，并部署了对应的访问入口（比如通过showSuccessPage函数生成Web应用URL）。示例GAS函数：

function showSuccessPage() {
  return HtmlService.createHtmlOutputFromFile('success')
    .setTitle('提交成功');
}

方案一：前端JavaScript处理（推荐） #

拦截表单默认提交行为，异步发送数据后手动跳转：

1. 给表单添加ID，示例HTML：

<form id="submitForm">
  <input type="text" name="username" required>
  <input type="text" name="driveUrl" placeholder="Drive链接">
  <button type="submit">提交</button>
</form>

2. 添加提交处理脚本：

document.getElementById('submitForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  const res = await fetch('你的GAS Web应用提交URL', {
    method: 'POST',
    body: formData
  });

  // 依据原有JSON返回判断成功状态
  const result = await res.json();
  if (result.status === 'success') {
    window.location.replace('你的成功页面部署URL');
  } else {
    alert('提交失败，请稍后重试');
  }
});

方案二：后端GAS直接触发跳转 #

修改doPost函数，处理完数据后返回跳转脚本：

function doPost(e) {
  try {
    // 原有数据写入Sheets逻辑
    const sheet = SpreadsheetApp.openById('你的表格ID').getSheetByName('数据sheet');
    const submitData = [
      new Date(),
      e.parameter.username,
      e.parameter.driveUrl
    ];
    sheet.appendRow(submitData);

    // 返回跳转脚本
    return ContentService.createTextOutput(`<script>window.location.href='你的成功页面部署URL';</script>`)
      .setMimeType(ContentService.MimeType.HTML);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({
      status: 'error',
      msg: err.message
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

关键注意点 #

• 部署GAS Web应用时，执行权限设为**“任何人，甚至匿名”**（若允许匿名提交），访问权限匹配需求。
• 先单独测试成功页面URL，确保能正常访问。
• 前端方案需处理网络异常，避免用户无反馈。

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