Stateful form inputs not included in email

Hi, I have a Gatsby site (ianlunn.co.uk / ianlunn.netlify.app) with a contact form at https://ianlunn.co.uk/contact. The contact form has a checbox that opens more fields once checked. I noticed the additional fields weren’t being included in the form submissions on Netlify. I’ve updated the page so the form now posts via AJAX as suggested here ( Form Handling with a Stateful React Form). Despite this, I still don’t see the additional forms being included as part of the submissions.

Any help please?

hi there,

this

or this

will likely help! If not, please let us know.

@perry I’ve set up a dummy form that renders the HTML without any client rendering but it still doesn’t work. Once a form is created, is it stuck with its original fields? Do I need to specify a new form?

we need to have a html form present at build time that contains all of the possible input fields that might contain data.

I was thinking that it should be possible to show input fields based on user choice the way you are hoping to, as long as there is an html form version with all the different fields present at build time (kind of link a kitchen sink form page, if you will.)

is that what you were trying to do? Are we on the same page?

Yes. I have set that up here: https://ianlunn.co.uk/contact-netlify/. It’s the whole form including all inputs without the checkbox toggle. The actual form is here https://ianlunn.co.uk/contact/

Note that my prefered method was just to do a normal form post rather than AJAX post so I have now gone back to using that.

@perry I have now changed the form at https://ianlunn.co.uk/contact to use the HTML hidden attribute when the checkbox isn’t checked. The static HTML will now make all of the inputs I want available. They still don’t appear in the Netlify form submissions though.

Please can you confirm I don’t need to somehow refresh the form with Netlify and it can pick up new fields as a form is updated. Beyond that, I don’t know what else to try.

hmm. i would expected things to work by now. I will have to let someone with more knowledge of forms chime in.

one more question - have you gotten a form to work successfully before? just wanting to rule out something else before we dig.

Ok. Thank you.

This is the first time trying Netlify so the only contact form I’ve made. It’s not that it isn’t working, I see some inputs, just not the ones that are initially hidden via the HTML hidden attribute.

FYI, I just tried camelCasing the input names as they were previously hyphenated, to no avail.

Hi @ianlunn, I’m not sure if Gatsby will prerender your complete form if it has some conditional fields. What I recommend is creating a hidden static version of your complete form with the same form name. This way our form parser will be aware of those fields as the form definition is done at build/deploy time and not during client-side rendering.