# Migrer de StaticKit vers Formspree

> Formspree Docs · Utiliser le CLI · 14 juillet 2023

Si vous avez déjà des formulaires StaticKit, démarrer avec Formspree est rapide et facile ! Les étapes sont généralement les suivantes :

1.  Créez un projet dans le tableau de bord Formspree pour chaque site StaticKit.
2.  Installez le CLI Formspree et mettez à jour votre code pour importer depuis les bibliothèques React Formspree.
3.  Remplacez votre clé de déploiement StaticKit et la prop `site` par votre clé de déploiement Formspree et votre identifiant de projet.
4.  Testez avec un nouveau déploiement pour vous assurer que votre nouvelle intégration fonctionne correctement.

## Créer un projet sur Formspree

Commencez par créer un compte sur Formspree. Une fois votre compte créé, sélectionnez **Nouveau projet** et choisissez **Projet CLI**. Un _identifiant de projet_ et une _clé de déploiement_ vous seront attribués. Gardez-les à portée de main, nous en aurons besoin plus tard.

## Installer le CLI Formspree

Installez l'interface en ligne de commande Formspree, puis renommez votre fichier `statickit.json` pour qu'il fonctionne avec Formspree. Créez un déploiement pour informer Formspree de vos formulaires en utilisant la clé de déploiement obtenue précédemment.

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

## Mettre à jour votre code pour utiliser la bibliothèque React Formspree

Vous devez installer la bibliothèque React Formspree :

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

Ensuite, le composant `<StaticKitProvider>` doit être remplacé par un `<FormspreeProvider>`. Vous souvenez-vous de la clé de projet que nous avons reçue ? Remplacez l'attribut `site` par `project` et spécifiez votre identifiant de projet.

Voici un exemple avec un fichier Next.js. Voici notre ancien fichier :

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

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

export default App;
```

Et voici le nouveau fichier après migration :

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

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

export default App;
```

Dans tous les fichiers contenant vos formulaires, il suffit d'utiliser la bonne bibliothèque. Vous pouvez rechercher dans votre base de code et remplacer simplement `@statickit/react` par `@formspree/react`. Voici à quoi pourrait ressembler un formulaire :

```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'objet `state` reste identique à celui de StaticKit, donc si vous avez des composants `ValidationError`, vous pouvez les conserver tels quels.

## Tout tester

Assurez-vous que tout fonctionne correctement. Consultez votre tableau de bord et vérifiez que tous les formulaires que vous avez définis dans `formspree.json` ont bien été créés.

Sur votre site web, vérifiez que les formulaires migrés vers Formspree fonctionnent comme prévu. Après une soumission, ils doivent apparaître dans le tableau des soumissions de votre formulaire.

C'est tout ! Vous pouvez désormais avoir l'esprit tranquille, sachant que Formspree gère vos formulaires pour vous.