Form isnt seen in Netlify dashboard from Gatsby site

Support
1

Hi there. Site product page link

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="checkout-form"
    method="post"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
    onSubmit={onSubmitHandler}
  >
    <input type="hidden" name="form-name" value="checkout-form" />

My submit function looks like:

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

}

2

Hey @LoveDesignUA,
Could you please share the function you use to encode the body here:

  body: encode({
    "form-name": form.getAttribute("name"),
    ...formData,
  }),
3 
function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}
4

That looks fine to me! In some cases, we have seen conflicts with the encoding function and the spread (...) operator:

But that doesn’t seem to be the issue here.

I should have caught this earlier, so my apologies, but one thing to try would be removing this line:
<input type="hidden" name="form-name" value="checkout-form" />

We will automatically add that hidden field. The fact that you have added it may be why it was never “registered” in our database. Let us know if that works for you.

5

I have deleted these hidden fields but form still isnt seen.
I was following instructions for static site generator here. I was testing forms and they are seen at netlify if they are present on the page. In my site form doesnt present by default but only seen in the 2nd step inside cart drawer.

6

Hey @LoveDesignUA,
You may have to recreate a static version of the form on the main index page as described in our docs here:

You can work around this by creating a hidden HTML form with the data-netlify="true" attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form.

I believe the “drawer” is appended to the page with Javascript when you click the cart icon, so when our build system parses all the page in your build looking for forms, the system cannot find that form.

That said, I just took another look at your live site and it looks like maybe you got this working with Formspree?

7

You are absolutely right. “drawer” is appended to the page with Javascript when you click the cart icon. I have changed form to Formspree because i didnt find any solution for my problem. If its possible to fix that with Netlify it will be perfect

8

did you create a static version of your form as per Jen’s suggestion? I am still thinking that should work.

9

I have a static form in the main page and it is seen in Netlify and works correctly. But i still havent found solution for the form locates inside Drawer component.