如何将HTML表单数据发送到Google Sheet？部署后无法提交求助

前端代码核心错误修复 #

你当前的代码存在最直接的问题是表单名称不匹配，导致提交事件根本没有绑定成功：

• 你的<form>标签name属性设置为test_form
• 但JS代码中取值写的是document.forms['google-sheet']，此处获取到的form为null，绑定事件失效，提交后无响应甚至会直接刷新页面。

修复后的JS代码参考：

const scriptURL = '你自己的Google Apps Script部署链接'
// 改为和表单name属性一致的取值
const form = document.forms['test_form']

form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, {
            method: 'POST',
            body: new FormData(form)
        })
        // 建议先解析返回结果再提示，避免接口报错也弹出成功提示
        .then(response => response.json())
        .then(res => {
            alert("提交成功，我们将尽快与您联系")
            form.reset()
        })
        .catch(error => console.error('提交错误：', error.message))
})

Google Apps Script 配置检查项 #

如果修改前端代码后仍然提交失败，请逐一检查以下配置：

• 确认脚本代码逻辑正确：脚本需正确接收表单字段（title/firstname/lastname/email/telephone/comment），同时设置跨域响应头，示例参考：

  function doPost(e) {
    const sheet = SpreadsheetApp.openById('你的表格ID').getSheetByName('你要写入的工作表名称');
    const data = [
      new Date(),
      e.parameter.title,
      e.parameter.firstname,
      e.parameter.lastname,
      e.parameter.email,
      e.parameter.telephone,
      e.parameter.comment
    ];
    sheet.appendRow(data);
    // 必须设置跨域头，否则前端会报跨域错误
    return ContentService.createTextOutput(JSON.stringify({status: 'success'}))
            .setMimeType(ContentService.MimeType.JSON)
            .setHeaders({'Access-Control-Allow-Origin': '*'});
  }
  

• 确认部署权限配置正确：部署时「执行身份」选择你自己，「有权访问的人」选择「任何人，甚至匿名用户」，否则会返回403权限错误。
• 确认部署为最新版本：每次修改Apps Script代码后，都需要重新部署为新版本，使用新生成的部署链接，否则修改不会生效。
• 确认表格权限：关联的Google Sheet要给脚本的所有者账号开放编辑权限，否则脚本无法写入数据。

调试方法 #

按F12打开浏览器开发者工具，切换到「控制台」和「网络」标签，点击提交按钮后查看报错信息，可快速定位问题：

• 跨域错误：对应脚本未配置跨域头
• 403错误：对应部署权限配置错误
• 404错误：对应部署链接填写错误

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