GatsbyJS + Netlify 表单不接收提交
GatsbyJS + Netlify Form doesn't receive submissions
所以,我在 Netlify 上托管了一个网站。我按照他们网站上的文档(关于表单)进行操作,部署后表单的名称显示在我的 Netlify dash 上,但 none 的提交正在进行。
我可以帮忙吗?
这是我的 Contact.js 组件中的表单:
<form
name="contact-me"
method="post"
action="/success"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="bot-field" />
<label htmlFor="name">
Name: <input type="text" name="name" id="name" required />
</label>
<label htmlFor="email">
Email: <input type="email" name="email" id="email" required />
</label>
<label htmlFor="message">
Message: <textarea name="message" id="message" required />
</label>
<footer className="major">
<ul className="actions">
<li>
<button type="submit" className="button small special">
Send
</button>
</li>
<li>
{/* eslint-disable-next-line */}
<button type="reset" className="button small">
Clear
</button>
</li>
</ul>
</footer>
</form>
当然,我正在使用 Gatsby 来构建网站。
如果我应该将 link 放到我的仓库中,请告诉我。
谢谢
使用 Gatsby 站点测试 netlify 将看到的内容的最快方法:
- 在您的浏览器中禁用站点javascript
- 使用 no javascript
进入联系页面
- 查看页面源代码(页面 netlify 用于注册表单)
- 查看表单并确保 Netlify requires
的值存在
- 需要
data-netlify="true"
表格
<form name="contact" method="POST" data-netlify="true">
<p>
<label>Email: <input type="text" name="name" /></label>
</p>
<p>
<label>Message: <textarea name="message"></textarea></label>
</p>
<p>
<button type=”submit”>Send</button>
</p>
</form>
如果设置正确,您的表单应该在 SPA 中正确处理并正确注册输入字段。
我遇到了类似的问题。解决方案是确保在 gatsby-config.js
:
中的清单之后加载我的网络工作者
{
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
...
}
},
'gatsby-plugin-offline'
]
}
来源:https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/
这个包也有助于构建表单:https://www.npmjs.com/package/react-netlify-form
所以,我在 Netlify 上托管了一个网站。我按照他们网站上的文档(关于表单)进行操作,部署后表单的名称显示在我的 Netlify dash 上,但 none 的提交正在进行。
我可以帮忙吗?
这是我的 Contact.js 组件中的表单:
<form
name="contact-me"
method="post"
action="/success"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="bot-field" />
<label htmlFor="name">
Name: <input type="text" name="name" id="name" required />
</label>
<label htmlFor="email">
Email: <input type="email" name="email" id="email" required />
</label>
<label htmlFor="message">
Message: <textarea name="message" id="message" required />
</label>
<footer className="major">
<ul className="actions">
<li>
<button type="submit" className="button small special">
Send
</button>
</li>
<li>
{/* eslint-disable-next-line */}
<button type="reset" className="button small">
Clear
</button>
</li>
</ul>
</footer>
</form>
当然,我正在使用 Gatsby 来构建网站。
如果我应该将 link 放到我的仓库中,请告诉我。
谢谢
使用 Gatsby 站点测试 netlify 将看到的内容的最快方法:
- 在您的浏览器中禁用站点javascript
- 使用 no javascript 进入联系页面
- 查看页面源代码(页面 netlify 用于注册表单)
- 查看表单并确保 Netlify requires 的值存在
- 需要
data-netlify="true"
表格
<form name="contact" method="POST" data-netlify="true">
<p>
<label>Email: <input type="text" name="name" /></label>
</p>
<p>
<label>Message: <textarea name="message"></textarea></label>
</p>
<p>
<button type=”submit”>Send</button>
</p>
</form>
如果设置正确,您的表单应该在 SPA 中正确处理并正确注册输入字段。
我遇到了类似的问题。解决方案是确保在 gatsby-config.js
:
{
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
...
}
},
'gatsby-plugin-offline'
]
}
来源:https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/
这个包也有助于构建表单:https://www.npmjs.com/package/react-netlify-form