在 Gatsby 站点的 Netlify 仪表板中看不到表单

Question

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

我的表单位于 Drawer 组件中，默认情况下不可见，只能通过单击打开。

我已经为初始化添加了所有必填字段，但没有任何反应

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

我当前的提交功能：

const onSubmitHandler = 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"),
        ...formData,
      }),
    })
      .then(() => {
        dispatch(clearCart())
        setFormData(initialFormData)
        dispatch(setCartStage("complete"))
      })
      .catch(error => console.log(error))
  }

Answer 1

您必须使用 name="form-name" 和相同的 value 提供 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>

重复 hidden form-name 字段是绝对必要的。如果您省略此字段或输入错误的名称，您的输入将引发错误或丢失，因为 Netlify 不知道如何将此请求与您的表单相匹配。

此外，您的 POST 请求必须在正文中包含此字段。一个理想的提交应该是这样的：

  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))
  }

您可以在此找到详细信息 article (provided by Netlify) and a live example and source code in this GitHub repository

I receive 404 when submitting

我认为你的源路径是错误的。您的表单现在看起来不错，但 Netlify 找不到请求的 URL.

在 Gatsby 站点的 Netlify 仪表板中看不到表单

Form isnt seen in Netlify dashboard from Gatsby site

reactjs

gatsby

netlify