单表单无法提交至Google Sheet，前置表单才可正常运行

核心问题 #

你的代码存在两个关键问题，导致单独保留目标表单时无法正常提交：

1. 重复ID冲突：两个表单内的输入框、按钮ID完全重复（如form-name、send-button），HTML要求ID全局唯一，重复ID会干扰浏览器对DOM元素的识别与事件绑定逻辑。
2. 表单获取的潜在时序问题：使用document.forms['submit-to-google-sheet']获取表单虽可行，但部分场景下可能因DOM解析顺序导致获取失败，而前置隐藏表单的存在意外规避了这个时序问题。

修复步骤 #

1. 移除冗余表单：直接删除那个隐藏的冗余表单，只保留名称为submit-to-google-sheet的目标表单。
2. 清理重复ID：删除目标表单内不必要的ID（脚本通过表单实例收集数据，无需依赖ID），或修改为全局唯一的ID值。
3. 优化脚本逻辑：使用更可靠的表单选择器，并增加表单存在性校验，避免因DOM加载问题导致脚本报错。

修复后的完整代码 #

<div class="contact-right">
    <form name="submit-to-google-sheet" class="contact-form">
        <input name="Name" type="text" placeholder="Your Name" required>
        <input name="Email" type="email" placeholder="Your Email" required>
        <textarea name="Message" placeholder="Your Message"></textarea>
        <button type="submit">Send</button>
    </form>
</div>
</section>
<div class="footer">
    <p>Stuff Here</p>
</div>

<script>
    const scriptURL = '<SCRIPT URL>'
    // 更稳定的表单选择方式
    const form = document.querySelector('form[name="submit-to-google-sheet"]')
  
    // 确保表单存在再绑定提交事件
    if (form) {
        form.addEventListener('submit', e => {
            e.preventDefault()
            fetch(scriptURL, { method: 'POST', body: new FormData(form)})
                .then(response => console.log('提交成功！', response))
                .catch(error => console.error('提交失败！', error.message))
        })
    } else {
        console.error('未找到目标提交表单')
    }
</script>

额外验证点 #

• 确认Google Apps Script已正确部署，且<SCRIPT URL>为有效地址。
• 测试时打开浏览器控制台（F12），查看是否有报错信息，快速定位剩余问题。

内容的提问来源于stack exchange，提问作者Kevin Lizarazu-Ampuero