Form detection and submission

Support
,
1

Hello,
I have a Gatsby site deployed to Netlify at op-porfolio.netlify.app, and I can’t seem to get form submissions in my dashboard.
My site was previously build with Stencil.JS and everything was working fine.
After migrating to Gatsby the form stopped working.
I have set everything up according to the docs:

  • I’m using Gatsby so I don’t need a separate HTML form other than my JSX form (I can see the form tag when viewing the page source).
  • I have the data-netlify tag, form name attribute and the hidden input:
    <form name="contact" data-netlify="true" data-netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact" />
    ...
</form>
  • I have the form-name parameter in my post request, and all parameters match the input names:
    body: encode({
  'form-name': 'contact',
   name: name.value,
   email: email.value,
   message: message.value,
})

When I deploy my site to Netlify I don’t see the form detected message with fields names in the logs (as I saw when building with Stencil).
When submitting the form (using JS) I get a 200 response, but in my dashboard I see empty submissions:

image
image1196×370 18.1 KB

I suspect that the only reason I’m even seeing the form listed is because it worked before when I deployed the Stencil.JS build.
The submissions made through the Stencil build, which were fine before, are now also blank (see the last one in the above image).

Any help will be greatly appreciated :pray:
Please let me know if I can provide any more info
Thanks!

2

Hi @OPerel,

Could you try publishing this on a different website or changing the form name on this website so this gets registered as a new form and probably fix stuff?

3

Hey @hrishikesh,
Thanks for the reply.

Changed the form name, and it’s still not working.
But I think I found the problem.
I’m using Ionic components which renders my input fields as <ion-input>, and I think Netlify forms don’t detect these.
It’s a bit weird since the Ionic components worked with Stencil, but I guess Gatsby and Stencil just render them differently.
I will test this later (had thoughts about moving away from Ionic components anyway…) and post my results here.

Thanks again!:pray:

1 Like
4

The problem was solved when I moved away from Ionic components.
It’s all working now.
Hope this helps someone :pray:

1 Like
5

Thanks so much for coming back and confirming your solution, @OPerel! Glad everything is working for you now :netliconfetti: