This site needed an email submission form to maintain viewers' email for future newsletters. Formik is my standard for creating react forms. This quick tutorial will show you how to set up a Formik form on a Gatsby site.

Gatsby has outdated instructions on how to add MailChimp to a website. These are still helpful. The MailChimp Endpoint is now found at Create > Signup Form then Embedded form > Begin. In the Copy/paste onto your site section (which isn't easily copy and paste-able, the list url is included. For me this is: https://marcusmth.us19.list-manage.com/subscribe/post?u=ad029d5ad74ac2e045f7d5d6b&id=603f11dd41.

This tutorial varies at Gatsby Import Plugin Instructions. Hopefully you already have Formik included in your project ($ yarn add Formik).

MailChimp requires specific names for fields, so firstName must be renamed to FNAME.

• FNAME - firstName
• LNAME - lastName
• EMAIL - email
• ADDRESS - address
• PHONE - phone
• BIRTHDAY - birthday

import React from "react"

import addToMailchimp from "gatsby-plugin-mailchimp"
import { useFormik } from "formik"

const MailChimpForm = () => {
  const formik = useFormik({
    initialValues: {
      email: "",
      firstName: "",
    },
    onSubmit: values => {
      addToMailchimp(values.email, {FNAME: values.firstName})
      .then(data => {
        if (data.result === "error") {
            alert("error: likely a duplicate email");
        } else {
            alert("success");
      })
    },
  })
  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        id="email"
        name="email"
        type="email"
        placeholder="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <input
        id="firstName"
        name="firstName"
        type="text"
        placeholder="name"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />
      <button type="submit">Submit</button>
    </form>
  )
}

export default MailChimpForm

Finally drop this component anywhere in your site and collect emails for MailChimp.

<MailChimpForm/>