How To Build a Contact Form with React

    Learn how build a React form to collect contact form submissions and receive email notifications.

    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 a form with an action to notify you via email:

    {
    "forms": {
    "contactForm": {
    "name": "Contact Form",
    "actions": [{ "type": "email", "to": "{your-email-address}" }]
    }
    }
    }

    Then, deploy your changes to StaticKit:

    statickit deploy -k <your-deploy-key>

    3Build your form

    Wire up your form component using the useForm hook:

    import React from 'react';
    import { useForm, ValidationError } from '@statickit/react';
    function ContactForm() {
    const [state, handleSubmit] = useForm("contactForm");
    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}
    />
    <textarea
    id="message"
    name="message"
    />
    <ValidationError
    prefix="Message"
    field="message"
    errors={state.errors}
    />
    <button type="submit" disabled={state.submitting}>
    Submit
    </button>
    </form>
    );
    }
    export default ContactForm;

    Learn more about StaticKit forms