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@email.com" />
    </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

Answer 2

如果使用任何重定向方法，则必须在根文件夹中添加 _redirects 文件并为其添加路径，以便重定向可以工作。

这可能会令人困惑，但您可以访问此link以获得更多帮助。

无法接收有关Netlify部署的表单提交

2 个答案: