Reactjs 在盖茨比网站的Netlify仪表板中看不到表单

我对Netlify form+Gatsby有问题。我在Netlify仪表板中看不到我的表单

“我的表单”位于抽屉组件中，该组件默认情况下不可见，但只能通过单击打开

我已经添加了初始化所需的所有字段，但什么都没有发生

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">...</form>

---

您必须使用

name=“form name”

提供一个

hidden

输入，输入值必须与您希望表单显示在仪表板中的值相同：

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
  {/* You still need to add the hidden input with the form name to your JSX form */}
  <input type="hidden" name="form-name" value="contact" />
  ...
</form>

您可以在本页和

---

提交时我收到404

我认为你的出发点是错误的。您的表单现在看起来不错，但Netlify找不到请求的URL

---

您必须提供一个

隐藏的
输入，输入的
name=“form name”
值必须与您希望表单显示在仪表板中的值相同：

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
  {/* You still need to add the hidden input with the form name to your JSX form */}
  <input type="hidden" name="form-name" value="contact" />
  ...
</form>

您可以在本页和


提交时我收到404

我认为你的出发点是错误的。您的表单现在看起来不错，但Netlify找不到请求的URL

Ferran，谢谢您的回复。我添加了隐藏输入并更改了handleSubmit函数，但什么也没发生。我仍然没有在Netlify仪表板中看到任何表单。正如我在前面写的那样，表单内部组件默认显示为：“无”
，它只通过单击操作显示。Netlify机器人是否可能因为此显示而找不到我的表单：无？在我的情况下，我有三个步骤抽屉：第一步是购物车概述与购物车项目，第二步是购物车形式和第三步是“谢谢你”页面“如果操作正确触发，则不介意显示：无。你能检查一下你的网络标签，看看它是否在发送一个
POST
请求吗？请求的快照以及您的提交功能会很有趣。我已经添加了提交功能。您是否可以确认正在发送一个
POST
请求
onSubmit
？我添加了action='/'，但什么都没有发生。我的表单在React组件中，但不在Gatsby页面模板中。您可以在购物车中检查此表单。第二步，您必须选择大小并添加到购物车中。之后只需点击cartFerran内部的绿色按钮，感谢您的回复。我添加了隐藏输入并更改了handleSubmit函数，但什么也没发生。我仍然没有在Netlify仪表板中看到任何表单。正如我在前面写的那样，表单内部组件默认显示为：“无”

，它只通过单击操作显示。Netlify机器人是否可能因为此显示而找不到我的表单：无？在我的情况下，我有三个步骤抽屉：第一步是购物车概述与购物车项目，第二步是购物车形式和第三步是“谢谢你”页面“如果操作正确触发，则不介意显示：无。你能检查一下你的网络标签，看看它是否在发送一个

POST

请求吗？请求的快照以及您的提交功能会很有趣。我已经添加了提交功能。您是否可以确认正在发送一个

POST

请求

onSubmit

？我添加了action='/'，但什么都没有发生。我的表单在React组件中，但不在Gatsby页面模板中。您可以在购物车中检查此表单。第二步，您必须选择大小并添加到购物车中。之后，只需点击购物车内的绿色按钮

  const handleSubmit = (e) => {
    e.preventDefault()
    const form = e.target
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'), 
        ...state, // your fields paired with key: name
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch((error) => alert(error))
  }