Using the React Chrome add-on I am able to see that state is being updated for ‘address’ name and value. But not when submitted the fields are not present.
new prop : ""
name "My Name"
address "123 Any Road"
I have also tested without any conditional rendering and the address textarea content submits fine. So the issue I believe lies in how ‘this.state’ (form values) are handled on submit for the conditional rendered elements. I’m new to React so likely missing something obvious maybe?
Here is the code used to conditionally show ‘address’ field when the ‘delivery’ option is selected.
This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides
We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!
We do cover this issue in that support guide.
This the the summary of the issue. There is a requirement that all fields which could possibly be sent be defined in an HTML version of that form somewhere. This field isn’t in the HTML so it doesn’t work.
It doesn’t have to be in the same HTML file but all possible fields must be defined in HTML somewhere in the site’s files before they will work.
Because this form doesn’t have that field defined in the HTML, the backend is not configured to accept it as an input. It won’t work until it exists in an HTML version of the form which, again, can be a separate file only used to create the backend form handler and not used for anything else.
If there are other questions or concerns, please let us know.
I have already checked and read the existing support guides. This was indeed and is always, my first port of call. I have also been searching the forums as well as Google. Now I will admit I may have been too narrow in my search as I am using React+Gatsby and was specifically looking React+Gatsby+conditional rendering as this is specifically where my issue lies, from what I can tell.
You mention the need to have an HTML version of my form somewhere. Is this required with Gatsby? Aside from the conditional address field, my form is working fine and gets submitted and I can view the contents in Netlify. Is there something If there is specifically something I need to do additionally with my conditionally rendered address field I would be very grateful for your guidance here as I have been unable to find anything in the guides around conditionally rendered fields in a form using Netlify.
Here is the HTML I can see looking in Dev Tools, when I select “Delivery” and below this the comment field which is always visible and works fine.
There is no input for the named “address” in that form. Because of that, the form handler won’t access inputs with that name. It only accepts fields/inputs in the HTML deployed and the HTML deploy doesn’t have “address”.
The solution for this will be to create a pure HTML version of the form which contains all possible inputs/fields. You don’t have to use that HTML form on the site but it must exist.
For example, could you make sure all fields were showing in the browser, copy the form from devtools to a new HTML file (for example, one named /not-used/form.html) and then the form handler would process all the fields. You can even set up a redirect so that this form isn’t visible on the deployed site with a _redirects rule like so:
/not-used/* /404 404!
The key here is that an HTML version with all possible fields/inputs must exist or the form handler won’t accept them.