Migrer de StaticKit vers Formspree

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.

npm i -g @formspree/cli

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

Vous devez installer la bibliothèque React Formspree :

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 :

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 :

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 :

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.