Netlify AJAX Request In Gatsby

Support
, ,
1

Hi Everyone,

So I’m in the process of revamping my portfolio site with Gataby, however, I’m having a small problem getting the form functionality work.

To get the form working on netfliy I have followed the basic setup this inlcudes:

  1. Adding a name attribute to the form
  2. Adding the POST method to the form
  3. Adding data-netlify=‘true’ to the form tag
  4. Adding data-netlify-honeypot=‘bot-field’ to the form tag

To submit the form I’m not using the traditional netlify approach Im using the AJAX approach. It seem’s straight forward, but when I come to submit the data to Netlfiy I’m getting a 404 response which is weird as you need to set the AJAX endpoint to be ‘/’ which I have yet it’s saying it doesn’t exist. I’m really confused, not sure why it’s not working.

If someone is avaliable to assist it would be greatly appreciated.

Screenshot for reference:

image
image1910×861 73.8 KB

Links:

Site: https://zealous-lumiere-32d4c6.netlify.app/ (Work In Progress)

Github: https://github.com/AlexMachin1997/Portfolio-Netlify-/tree/feature/gatsby-rewrite

2

Hi @AlexMachin1997 :wave:t2:

I actually made a small wrapper component specifically for folks using React SSGs and wanting to use Netlify Forms. I might suggest giving it a try!

It automatically builds in a honeypot field too :slight_smile:

I hope that helps!

1 Like
3

Hi @jonsully

I actually got it working yesterday and forgot to update the post lol.

I was sending the data across, I was sending it in a JSON format by accident.

I ended up with somethng like this:

image
image607×552 18.5 KB

1 Like