前端表单数据无法同步至Google Sheet问题排查及方案咨询

先看你代码里的明显错误 #

你的JS代码存在几个关键问题，直接导致数据无法提交：

• document.getElementById('#userForm') 写法错误：getElementById 参数不需要加#，直接写ID字符串即可，改成 document.getElementById('userForm')
• 事件绑定对象错误：你把submit事件绑在了按钮上，但表单的提交事件应当绑定到<form>元素，按钮只是触发提交的载体
• 事件参数未定义：函数里用了e.preventDefault()，但函数参数没声明e，要改成 function(e)
• fetch配置错误：fetch的选项里没有url这个参数，应该把Google Sheet的提交URL放在form的action属性里，而非fetch配置项中
• 缺少错误处理：fetch仅在网络故障时才会进入reject状态，HTTP错误（比如403、500）不会触发异常提示，必须补充错误捕获逻辑
• 重复监听加载事件：同时用了$(document).ready和window.addEventListener("load")，保留其中一个即可

修正后的代码示例 #

HTML（补充form的action属性）

<form class="section__form" id="userForm" action="你的Google Apps Script部署URL" method="POST">
  <label>YOUR NAME:
    <input type="text" class="section__form-input" id="Name" name="Name" placeholder="Your Name" required>
  </label>
  <label>EMAIL ADDRESS:
    <input type="email" class="section__form-input" id="Email" name="Email" placeholder="Email Address" required>
  </label>
  <button type="submit" class="section__cta" id="submitBtn">LEARN MORE</button>
</form>

JS（简化并修正错误）

$(document).ready(function() {
  const form = document.getElementById('userForm');
  
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const data = new FormData(form);
    
    fetch(form.action, {
      method: 'POST',
      body: data,
      mode: 'no-cors' // 遇到跨域问题时可添加，需确保Google脚本允许匿名访问
    })
    .then(() => {
      alert("提交成功！");
      form.reset(); // 可选：提交后清空表单
    })
    .catch(error => {
      console.error("提交失败原因：", error);
      alert("提交失败，请稍后重试");
    });
  });
});

Google Sheet后端设置检查 #

除了前端代码，必须确认Google Apps Script的部署流程正确：

1. 打开目标Google Sheet，点击菜单栏「扩展程序」→「Apps Script」
2. 替换默认代码为以下内容（确保Sheet表头列名和表单name属性一致，这里对应Name和Email）：

const sheetName = 'Sheet1' // 改成你的Sheet表名
const scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  } catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  } finally {
    lock.releaseLock()
  }
}

3. 点击菜单栏「运行」→「intialSetup」，授权脚本访问你的Sheet
4. 点击「部署」→「新部署」，选择类型为「Web应用」：
   • 执行：选择「我」
   • 谁可以访问：选择「任何人，甚至匿名」
   • 点击部署，复制生成的URL，粘贴到HTML form的action属性中

更优实现思路 #

• 移除jQuery依赖：单纯做表单提交，原生JS完全够用，减少不必要的库引入
• 强化表单验证：除了HTML5的required，可添加前端自定义验证（比如邮箱格式校验）
• 优化提交反馈：替换alert为更友好的页面提示（比如提交中按钮禁用、成功/失败内嵌提示框）
• 敏感数据防护：如果涉及隐私信息，确保Google脚本部署使用HTTPS（默认已支持），或考虑加密传输逻辑

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