React form submitting but not receiving submission in Netlify form

I was wondering if anyone could help me. I added a full-stack website to be hosted on Netlify with the backend being hosted on Render (Node/Express). I added a contact form, and it appears that the form is submitted correctly, but I do not receive the form submission from the Netlify form.

Netlify forms did detect my form and I have everything setup including notifications for it, but for some reason I don’t get any submissions when the form is submitted. I have another site hosted on Netlify with a quite literal identical contact form and that works perfectly fine, so I am not sure what I am missing. That site is also built with React and Vite for the frontend, the only difference is that there is no backend for that one.

I am not sure if having a hosted backend on another site is having any impact (first time hosting a full-stack site). I have tried researching and troubleshooting with no success, as it appears I should have everything setup correctly.

If anyone can help me it would be greatly appreciated. Here are my links below:

Netlify site: https://macxmac.netlify.app/
GitHub Repo: GitHub - hdblake/Mac-X-Mac

If there is anything else I might need to share, please feel free to let me know so I can get this fixed. Thanks!

Not sure why you think so, the submission indeed fails:

It’s your website that still says the submission was a success.

Checking the code:

You’d not really checking if the submission was successful. You directly call .then().

Your content type seems to be incorrect. You’ve missed d at the end of urlencode<d>. Not sure if that’s the issue, but looks to be somethng worth checking.

I noticed the encoded misspelled and fixed that, but I am still having issues. Again, I have almost the same setup as another site and that one works without any issue, so not sure why this one isn’t working

Hi, @hdblake. I just tested the form submission using Chrome and I’m seeing the site still sending this header with the POST of the form:

content-type: application/x-www-form-urlencode

I used the devtools “copy as cURL” option to resend the submission using the correct header below:

content-type: application/x-www-form-urlencoded

When that was done, the form submission was successfully processed. If the header issue is fixed, that should be the only change needed to get these form submissions working.

I got it to work, I forgot I had old code in the contact page component, but the updated code in a ContactForm component that I was supposed to import into the Contact page. The contact page still had the incorrect spelling. It is now working fine. Thank you both very much for the help! Don’t know how I missed that spelling error!

1 Like