# Migrare da StaticKit a Formspree

> Formspree Docs · Usare la CLI · 14 luglio 2023

Se hai già moduli StaticKit, iniziare con Formspree è rapido e semplice! I passaggi sono generalmente i seguenti:

1.  Crea un progetto con la dashboard di Formspree per ogni sito StaticKit.
2.  Installa la Formspree CLI e aggiorna il tuo codice per importare dalle librerie React di Formspree.
3.  Sostituisci la tua chiave di deployment StaticKit e la prop site con la tua deploy key Formspree e l'ID del progetto.
4.  Esegui un test con un nuovo deployment per assicurarti che la nuova integrazione funzioni correttamente.

## Creare un progetto su Formspree

Inizia registrandoti per un account su Formspree. Una volta creato il tuo account, seleziona **New Project** e scegli **CLI Project**. Ti verranno forniti un _Project ID_ e una _Deploy Key_. Tienili a portata di mano, li useremo più tardi.

## Installa la Formspree CLI

Installa l'interfaccia della Formspree CLI, poi rinomina il tuo file `statickit.json` per farlo funzionare con Formspree. Crea un deployment in modo da comunicare a Formspree i tuoi moduli usando la deploy key di prima.

```shell
npm i -g @formspree/cli
```

## Aggiorna il tuo codice per usare la libreria React di Formspree

Dovrai installare la libreria React di Formspree

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

Ora il `<StaticKitProvider>` deve essere sostituito con un `<FormspreeProvider>`. Ricordi quella project key che abbiamo ricevuto? Sostituisci l'attributo `site` con `project` e specifica l'ID del tuo progetto

Diamo un'occhiata a un esempio in un file Next.js di esempio. Ecco il nostro vecchio file:

```jsx
import { StaticKitProvider } from '@statickit/react';

function App({ Component, pageProps }) {
  return (
    <StaticKitProvider site="{your-site-id}">
      <Component {...pageProps} />
    </StaticKitProvider>
  );
}

export default App;
```

E ora, dopo aver migrato tutto, ecco il nuovo file:

```jsx
import { FormspreeProvider } from '@formspree/react';

function App({ Component, pageProps }) {
  return (
    <FormspreeProvider project="{your-project-id}">
      <Component {...pageProps} />
    </FormspreeProvider>
  );
}

export default App;
```

In tutti i file con i tuoi moduli, ora dobbiamo semplicemente usare la libreria giusta. Puoi cercare nel tuo codebase e semplicemente sostituire `@statickit/react` con `@formspree/react`. Ecco come potrebbe apparire un modulo:

```jsx
import { useForm } from '@formspree/react';

function MyForm() {
  const [state, handleSubmit] = useForm('{your-form-key}');
  if (state.succeeded) {
    return <div>Thank you for signing up!</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" />
      <button type="submit" disabled={state.submitting}>Sign up</button>
    </form>
  )
}
```

L'oggetto `state` rimane identico a quello di StaticKit, quindi se hai dei componenti `ValidationError`, puoi tenerli così come sono.

## Testa tutto

Assicuriamoci che tutto funzioni correttamente. Visita la tua dashboard e verifica che tutti i moduli che hai definito in `formspree.json` siano stati creati.

Sul tuo sito web, assicurati che i moduli che sono stati migrati a Formspree funzionino come previsto. Una volta inviati, dovrebbero comparire nella tabella degli invii del tuo modulo.

Ecco fatto! Ora puoi stare tranquillo sapendo che Formspree gestirà i tuoi moduli per te.