Adding Formik React Components to Your Gatsby Site

Now that I've had a chance to play with using the gatsby-image plugin to my site for imaging handling, it's time for the next challenge. This one includes creating a contact form and adding third-party React components to my site, using Formik components. Creating forms is not my favorite thing to do, so I wanted to know if Formik would make things less painful. Here's what I learned.

Using Formik to build a contact form

I started off by reading Formik's getting started page and then followed the Formik tutorial through all the steps. I then learned that the site I spun up on Gatsby Cloud — which uses Netlify for CDN hosting — can also use Netlify Forms (yay!). I got a bit lost finding/remembering the site settings, and figuring out that my site was connected to my Netlify team.

Formik forms don’t use the method=“post” in their examples at all, but Gatsby's Sending Form Data documentation showed that attribute in their example for using Netlify’s form handling feature.

According to MDN's documentation on forms, this is what is written about the form method attribute:

This value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.

This was confusing to me and my questions were:

1. Should we use Formik’s Form component here at all?
2. What happens if you use the Form component here and use a button with a type="submit" without using the formmethod attribute?

Using Formik's <Form> component gave me really odd rendering errors, so I decided to use a standard form JSX element instead, ditched the method on the form, and made sure my Button component's type attribute was set to submit.

After digging around some other projects to see if anyone else was using Formik in their forms, I discovered that you can indeed use your own form component and combine with Formik. For example, Paul Scanlon did so with gatsby-theme-gatstats in his <NetlifyForm /> component. His contact form demo didn’t have a clear example of a handleSubmit function, other than passing through the prop from the <Formik> component. I wondered if I needed to create a handleSubmit function at all. Once I added a URL to the action to load a success page after the form submission, everything seemed to work. Or did it?

So far, this challenge took me the longest because of the ‘fun’ of forms. Anyhow, I still have this odd warning when using the setTimeout() in the <Formik> component's onSubmit fetch method:

index.js:2177 Warning: React instrumentation encountered an error: TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property '\_context' -> object with constructor 'Object'
--- property 'Provider' closes the circle

I kept on searching for more Formik examples and found this one by Derek Spaulding. This example was useful in showing that you can indeed pass through Netlify props to the Formik <Form> component.

Sweet. My form now works on my kathleenmcmahon.dev site — the site I’m deploying directly to Netlify though Github. My 100 Days of Gatsby Challenges site that’s deployed manually through Gatsby Cloud somehow doesn’t talk to the Netlify form action properly for some reason. I will figure out later and read up more about the ins/outs of using Gatsby Cloud as a CI service and how it relates to Netlify forms and/or functions by reading Josh Comeau's post on the subject. Now... onward to 100 Days of Gatsby — Challenge 5.