How to use Netlify Forms in React JS

[@jord_n]

What a coincidence, I was just thinking about how I would get this done, and then I checked my subscriptions. Thanks a lot, this method so much easier than what I was otherwise going to do.

[@ADesignerWhoCodes]

You are so welcome! I'm really stoked it helped.

[@heatherherries9359]

Thank you! Great informative info! Might think about making an add on with form validation. Thank you again!

[@ADesignerWhoCodes]

Ooh. Good idea

[@anthonyradin7166]

Thank you. You've contributed to my education as a react developer. Sincerely, Tony Radin.

[@ADesignerWhoCodes]

Wow. That's so awesome! Happy to help.

[@th0mas.p4ttz]

Awesome - just what I was looking for, thank you.

[@ADesignerWhoCodes]

Stoked! You're welcome.

[@guicaalmeida]

Great, straightforward video. Thanks!

[@ADesignerWhoCodes]

Very welcome Guilherme.

[@eltonsantos8804]

Hi Teacher! Its amazing, I've been learning a lot things with you! Congrats you are a good professional. Have a good day.

[@hillaryvanotten712]

This is great thank you!

[@ADesignerWhoCodes]

Netlify Forms rock.

[@nikoman71326]

Thanks for the video. You don't mention anything about including static HTML form to index.html. It doesn't work without it. Netlify doesn't recognize the form without these lines. Please correct me if I am wrong

[@ADesignerWhoCodes]

I'll eventually do a static HTML video. But I was in a React phase. Yes, some things will different between React and Vanilla HTML with React Forms.

[@SeeRjED]

​@@ADesignerWhoCodes From what I found you do need to add a static (hidden) HTML version of the form in index.html (or any html file) for it to work with your React app.

[@heatherherries9359]

Yep tried it and it doesnt work. Back to the drawing board. Sigh.

[@hamitaksln]

Great tutorial. Thanks.

[@ADesignerWhoCodes]

Thank you so much!

[@manueljarrin4582]

Can you do an ajax form submission example using react?

[@tjtechi4448]

what about I don't want it to go to the Netlify website after submission.? Please can you show that?

[@ADesignerWhoCodes]

Yep! It’s in the works

[@ADesignerWhoCodes]

Check it out. kzbin.info/www/bejne/ip67o31opJZjeJI

[@mikemoradi1084]

Good video, but it didn't work initially. I had to add a hidden html form in my index.html file like this. . Without it I would get a 404 error when submitted.

[@ADesignerWhoCodes]

Oh interesting. I keep the honeypot in by default. But it usually works without. That’s good to know.

[@RakeshKumar-zj4hu]

Is this react or Next with react? I'm getting a warning of onSubmit is a function and not a string. :(

[@ADesignerWhoCodes]

It’s React. I’m using Gatsby but it is just a react framework.

[@RakeshKumar-zj4hu]

and hence you did not see warning?

[@ADesignerWhoCodes]

Nope. My terminal came back success. I’m sorry you’re struggling.

[@KHANSOFFICIAL]

Any solutions for this

[@prajwalpatankar600]

My form isnt visible on netlify, and i get error 404 on submitting, can anyone help me out?

[@ADesignerWhoCodes]

Hmmm. Double check the URL structure. An error 404 (probably the most famous of all of the error numbers) is page not found. Double check it works on the dev side (I use gatsby so for me it's gatsby develop). If it doesn't work locally, it won't work on Netlify. You're gonna get this Prajawal. It's usually something small. I remember one time I used a dash (-) instead of an underscore (_) and spent an hour trying to figure out why my page wouldn't so up.

[@prajwalpatankar600]

After struggling for 10hrs, i realised that i had used routing in my App.js, and the component with the form was thus not recognised by netlify. I used react-snapshot and got it corrected. Thanks 🙏🙏

[@ADesignerWhoCodes]

@@prajwalpatankar600 it’s always the small things I tell ya.