# Creare un modulo ConvertKit con React

> Formspree Docs · Usare la CLI · 14 luglio 2023

Scopri come creare un modulo React per creare iscritti nel tuo account [**ConvertKit**](https://convertkit.com/).

## **1\. Prepara il tuo progetto**

Installa la libreria helper per React nel tuo progetto:

```
npm install @formspree/react
```

Poi aggiungi il `FormspreeProvider` al componente principale della tua app. Per esempio, se usi Next.js, ecco come potrebbe apparire il tuo file `pages/_app.js`:

```jsx
import { FormspreeProvider } from '@formspree/react';
function App({ Component, pageProps }) {
  return (
    <FormspreeProvider project="{your-project-id}">
      <Component {...pageProps} />
    </FormspreeProvider>
  );
}
export default App;
```

## **2\. Configura il tuo modulo**

Nel tuo file `formspree.json`, aggiungi un modulo di opt-in. Tieni presente che i `tags` che fornisci devono già esistere nel tuo account ConvertKit.

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

Poi, distribuisci le tue modifiche su StaticKit:

```
formspree deploy -k <your-deploy-key>
```

Riceverai le istruzioni su come salvare il tuo API secret di ConvertKit.  
**Scopri di più sulle azioni di ConvertKit →**

## **3\. Crea il tuo modulo**

Collega il componente del tuo modulo usando l'hook `useForm`:

```jsx
import React from 'react';
import { useForm, ValidationError } from '@formspree/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;
```

**[Scopri di più sulla CLI di Formspree](/articles/using-the-cli/the-formspree-cli/) →**  
**[Scopri di più su Formspree e React](/articles/working-with-react/the-formspree-react-library/) →**