How To Build a Mailchimp Form with React

    Learn how build a React form to create subscribers in your Mailchimp account.

    1Prepare your project

    Install the React helper library in your project:

    npm install @statickit/react

    Then add the StaticKitProvider to your top-level app component. For example, if you are using Next.js, here's what your pages/_app.js file might look like:

    import { StaticKitProvider } from '@statickit/react';
    function App({ Component, pageProps }) {
    return (
    <StaticKitProvider site="{your-site-id}">
    <Component {...pageProps} />
    </StaticKitProvider>
    );
    }
    export default App;

    2Configure your form

    In your statickit.json file, add an opt-in form.

    {
    "forms": {
    "optInForm": {
    "name": "Opt-In Form",
    "actions": [{
    "app": "mailchimp",
    "type": "addOrUpdateContact"
    }]
    }
    }
    }

    Then, deploy your changes to StaticKit:

    statickit deploy -k <your-deploy-key>

    You'll be prompted with instructions on how to save your Mailchimp API key and audience.

    Learn more about Mailchimp actions

    3Build your form

    Wire up your form component using the useForm hook:

    import React from 'react';
    import { useForm, ValidationError } from '@statickit/react';
    function OptInForm() {
    const [state, handleSubmit] = useForm("optInForm");
    if (state.succeeded) {
    return <p>Thanks for joining!</p>;
    }
    return (
    <form onSubmit={handleSubmit}>
    <label htmlFor="email">
    Email Address
    </label>
    <input
    id="email"
    type="email"
    name="email"
    />
    <ValidationError
    prefix="Email"
    field="email"
    errors={state.errors}
    />
    <button type="submit" disabled={state.submitting}>
    Sign Up
    </button>
    </form>
    );
    }
    export default OptInForm;

    Learn more about StaticKit forms