如何实现向Google Forms提交数据且不跳转至表单页面？

作为JS新手，你完全可以用原生fetch API实现这个需求，不用跳转页面，步骤如下：

1. 获取Google Forms的关键信息 #

打开你的Google Form，先收集两个核心信息：

• 查看页面源码，找到<form>标签的action属性值，这就是提交数据的API端点（格式类似https://docs.google.com/forms/d/e/XXXXXX/formResponse）
• 找到每个输入字段对应的name属性，格式是entry.XXXXXXXXXX，这是每个字段的唯一标识，要和你自己表单的输入框一一对应

2. 编写自定义表单与提交逻辑 #

不用依赖Google自带的表单，自己写HTML表单，再用JS拦截提交事件、发送数据：

HTML示例 #

<form id="myCustomForm">
  <label>姓名：<input type="text" id="username"></label>
  <label>邮箱：<input type="email" id="userEmail"></label>
  <button type="submit">提交</button>
</form>

JavaScript示例 #

const form = document.getElementById('myCustomForm');

form.addEventListener('submit', async (e) => {
  // 阻止默认的表单跳转行为
  e.preventDefault();

  // 组装提交数据，注意key要替换成你拿到的Google Forms字段ID
  const submitData = new URLSearchParams();
  submitData.append('entry.1234567890', document.getElementById('username').value);
  submitData.append('entry.0987654321', document.getElementById('userEmail').value);

  try {
    // 发送POST请求到Google Forms端点
    await fetch('https://docs.google.com/forms/d/e/你的表单ID/formResponse', {
      method: 'POST',
      mode: 'no-cors', // Google Forms不返回CORS头部，需用此模式
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: submitData
    });

    // 提交成功后的反馈
    alert('提交成功！');
    form.reset(); // 清空表单
  } catch (error) {
    alert('提交失败，请重试');
    console.error(error);
  }
});

3. 关键注意点 #

• 必须保证entry.XXXXXX字段ID和Google Forms里的对应字段完全匹配，否则数据无法被正确接收
• mode: 'no-cors'是必要配置，因为Google Forms的响应不包含CORS允许头部，此模式下请求能成功发送，但无法读取响应内容，所以只能通过请求是否完成来判断提交状态
• 测试时可以提交后去Google Forms的「响应」标签页确认数据是否收到

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