Form isnt seen in Netlify dashboard from Gatsby site

Question

I have a problem with Netlify form + Gatsby. I can't see my form in Netlify dashboard.

My form locates in Drawer component that isn't seen by default but only opens by click.

I have already added all required fields for initialization but nothing happens

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

My current submit function:

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

You must provide a hidden input with name="form-name" and with the same value as you want your form to appear in your dashboard:

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

Repeating the hidden form-name field is absolutely necessary. If you omit this field or mistype the name, your entries will either throw an error or will get lost because Netlify won't know how to match this request with your form.

In addition, your POST request must include this field in the body. An ideal submit should look like:

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

You can find detailed information in this article (provided by Netlify) and a live example and source code in this GitHub repository

---

I receive 404 when submitting

I think your origin path is wrong. Your form now looks good but Netlify can't find the requested URL.