Multi-step form with Formik, Gatsby and Netlify

t2ca · February 28, 2020, 1:36am

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

jaredpalmer/formik/blob/master/examples/MultistepWizard.js

import React, { useState } from 'react';
import { ErrorMessage, Field, Form, Formik } from 'formik';
import * as Yup from 'yup';
import { Debug } from './Debug';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

// Wizard is a single Formik instance whose children are each page of the
// multi-step form. The form is submitted on each forward transition (can only
// progress with valid input), whereas a backwards step is allowed with
// incomplete data. A snapshot of form state is used as initialValues after each
// transition. Each page has an optional submit handler, and the top-level
// submit is called when the final page is submitted.
const Wizard = ({ children, initialValues, onSubmit }) => {
  const [stepNumber, setStepNumber] = useState(0);
  const steps = React.Children.toArray(children);
  const [snapshot, setSnapshot] = useState(initialValues);

  const step = steps[stepNumber];
  const totalSteps = steps.length;

This file has been truncated. show original

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

Dennis · March 2, 2020, 1:53pm

Hello @t2ca, as per this post: [Support Guide] 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.

t2ca · March 2, 2020, 10:42pm

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.

fool · March 3, 2020, 11:14pm

OK. We don’t have any special insight here into how Gatsby handles forms, so you might try asking in the Gatsby community here: Contributing to Gatsby | Gatsby

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

https://answers.netlify.com/t/netlify-forms-with-formik-in-a-create-react-app/868