无法在Netlify部署中收到表单提交

Question

我使用的是一个从Netlify相关文档中获取的简单表单：

<form name="contact" action="/" method="post" data-netlify="true">

    <div className="field">
        <label htmlFor="name">Name</label>
        <input type="text" name="name" id="name" value="dave"/>
    </div>
    <div className="field">
        <label htmlFor="email">Email</label>
        <input type="text" name="email" id="email" value="[email protected]" />
    </div>
    <div className="field">
        <label htmlFor="message">Message</label>
        <textarea name="message" id="message" rows="6"></textarea>
    </div>   
    <input type="submit" value="Send Message" className="" />

</form>

在使用gatsby develop并使用/提交表单时，事情似乎工作正常。我没有收到任何错误，并按预期重定向到主页。

在使用Netlify部署站点并尝试提交表单后，出现以下页面错误：

在我的Netlify后端，表单出现在控制台中，但我不能/不接收提交。

我正在使用一个准系统gatsby-config.js，只包含gatsby-source-wordpress和gatsby-plugin-google-analytics。

我也尝试添加/no-cache=1来形成动作。

有人可以提供建议吗？

值得注意的是，我已将表单编码为组件，并将其导入到我的页脚中。这样，它可以在this StackOverflow answer的第3点中提到的不同页面上多次导入。

谢谢。

Answer 1

我了解到，因为我正在使用Gatsbyjs，而Gatsby + Netlify = javascript表单，我需要在表单中添加另一个input type="hidden"：

<form name="my-form" ... >
   <input type="hidden" name="form-name" value="my-form" />

该文档并未立即明确，但以下是一些解决此问题的链接：

• 这是一篇指向我的文章的链接：How to Integrate Netlify’s Form Handling in a React App
• 如果你在Vue建造，那么这是另一个：How to Integrate Netlify Forms in a Vue App
• 所有关于Netlify Forms