How To Build a ConvertKit Form with React

    Learn how build a React form to create subscribers in your ConvertKit 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} />
    export default App;

    2Configure your form

    In your statickit.json file, add an opt-in form. Note that the tags you supply must already exist in your ConvertKit account.

    "forms": {
    "optInForm": {
    "name": "Opt-In Form",
    "actions": [{
    "app": "convertkit",
    "type": "applyTags",
    "tags": ["Newsletter"]

    Then, deploy your changes to StaticKit:

    statickit deploy -k <your-deploy-key>

    You'll be prompted with instructions on how to save your ConvertKit API secret.

    Learn more about ConvertKit 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
    <button type="submit" disabled={state.submitting}>
    Sign Up
    export default OptInForm;

    Learn more about StaticKit forms