Multi-step form with Formik, Gatsby and Netlify

I need some assistance with getting this form example from formik to work with gatsby and netlify.

Here is the issue, after creating the multi step form on my website, when i click submit, netlify-forms does not recognize any of the form inputs and data after step1. The form data from Step 2 and 3 does not exist.

I did create a non elegant solution around this problem by creating a 2nd page (forms2.js) and putting all the form inputs on a single page. However I am looking for a proper solution to this problem, so i don’t need to use 2 pages for forms. One page has the actual multi-step form that i link on the website and the second hidden page has all the form inputs on single page.

I hope this made sense, I really would appreciate any help to solve this problem.

Thank you

Hello @t2ca, as per this post: [Common Issue] Form problems, form debugging, 404 when submitting, you’ll need to have a single html version of your form with all the input fields defined. I’m not sure that is what gatsby generates when you have a multi-page form. I recommend looking at that post and also check your to see if it does have all the fields you expect.

Thank you @Dennis for taking the time to address my question.

Gatsby is only generating the form input fields from Step 1, so that is the problem that I need help with.

OK. We don’t have any special insight here into how Gatsby handles forms, so you might try asking in the Gatsby community here: https://www.gatsbyjs.org/contributing/community/

I’d suggest approaching the goal of “how can I make Gatsby output a plain html form with all the input fields defined” rather than “how can I make netlify and Formik all work together” since that is the simplest version of the problem you appear to be trying to solve, and it will be easier for them to help with a clearly defined request like that.

We did have a great writeup on Formik + Netlify here from another customer, that might also give some useful pointers and prevent a need to ask :slight_smile: