Form not getting data from fields

Hello, my site is https://nervous-archimedes-29186f.netlify.app and i am using gatsby/react

I have gone through a lot of guides and examples on how to set up netlify forms with gatsby, and it looks like i did everything right, but when i submit the form, the form response is not being stored on netlify like it should.

I was wondering if the fact that i dont have a domain yet would affect this? Im not sure, any advice would be helpful, thank you

This is my code:

Hey @Munson1970,
One thing (which you’ve already highlighted in your screenshot) is that I believe your action should be /… but maybe you’ve gotten this working since writing in? I’m seeing very recent submissions to a form called “contact”. Please let us know if that’s not the case and we’ll dig in further!

Hello thank you for the reply! Actually that is very strange, i have not gotten it working and i still dont have any submissions for the “contact” form

I will try changing my action to “/” but it could be something else if you are seeing the submissions and i am not

Also side note, how do i get rid of the “contact-form” form in netlify? I renamed my form and that was the old name of it

Ah, I misspoke! I see that your form exists in our database, but you’re right- no submissions. At any rate, that does narrow the scope a bit. Now, we’re looking to make sure you have a name attribute in every field (looks like you do to me), action path is correct, header is correct (looks like it to me) and encoding function is correct.

Would it be possible for you to log or render in an alert() the body after it’s been encoded, something like:
.then(() => {alert(encode({"form-name":......})}

This is the alert i got when i ran that:

Still no recorded form response in netlify

I also tried moving the setState action where i clear the fields outside of the fetch method, it still doesnt appear to be working

Hey @Munson1970,
Hmmm that data looks perfectly fine to me!

Let’s try something else. When I watch the network requests when submitting this form, your POST request shows a 303 status. This is unusual- it should be a 200.

Our docs suggest this could be recaptcha related:

When a visitor submits the form, our servers will validate the CAPTCHA server-side. If the validation fails, we’ll redirect the visitor back to the same page and reject the form submission.

I see that you set data-netlify-recaptcha="true" but I don’t see a recaptcha in your form anywhere. I’m wondering if setting that attribute, without include the recaptcha in the body of your form, is preventing your form data from being accepted as valid by our server. Could you try removing the recaptcha attribute and testing to see if you receive a submission? If that works, then we can add it back in correctly afterwards!

2 Likes

That did solve most of the problem! Thank you for catching that! Since i have you though, it doesnt seem to be collecting the data for first and last name, but it works for email, phone, and message, do you know what could be causing that?

This is my code for those 2 fields:

Hey @Munson1970 :wave:t2:

I can’t see off the top of my head where the disconnect is for your form in the way you’re handling state and passing it forward - it actually all looks fine :thinking: so it may be beneficial to paste some of the code in so we can parse it more directly.

Just to let you know as well, I made this component specifically for Netlify Forms in React-SSGs like Gatsby and it handles all the complicated stuff for you (tested to all work correctly :laughing:). Feel free to check it out and simply for your Form code quite a bit!

Otherwise post back your code and I’ll do my best to see what’s up :slight_smile:


Jon

2 Likes

Hey guys, I solved the problem, im not exactly sure what it was but i changed the name of the input field from “first-name” to “firstName” and same with the last name field, now it works great. Maybe they needed to have the same name as the state being used? Anyway thank you guys for your help! Oh last question, how do i remove “contact-form” from the site? I only want the “contact” one on there as i renamed it

2 Likes

@Munson1970 Just deleted that form for you- has to be done manually by Support at the moment! Soooo thrilled that you’re up and running with your form now :tada:

Cheers @jonsully, thanks so much for your help and for all of your other incredible support and insight throughout this community lately- can’t wait to check out your component and share with the team :trophy:

2 Likes

Happy to help! Hope it helps others too :slight_smile:

1 Like