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.
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.
This value is overridden by
<input type="submit">, or
This was confusing to me and my questions were:
- Should we use Formik’s Form component here at all?
- What happens if you use the Form component here and use a
type="submit"without using the
<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
type attribute was set to
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
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
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.