Von StaticKit zu Formspree migrieren

Wenn du bereits StaticKit-Formulare hast, ist der Einstieg in Formspree schnell und einfach! Die Schritte sind im Allgemeinen folgende:

1. Erstelle für jede StaticKit-Site ein Projekt im Formspree-Dashboard.
2. Installiere die Formspree CLI und aktualisiere deinen Code, um aus den Formspree-React-Bibliotheken zu importieren.
3. Ersetze deinen StaticKit-Deployment-Key und deine site-Prop durch deinen Formspree-Deploy-Key und deine Projekt-ID.
4. Teste mit einem neuen Deployment, um sicherzustellen, dass deine neue Integration korrekt funktioniert.

Ein Projekt auf Formspree erstellen

Beginne damit, dich für ein Konto bei Formspree zu registrieren. Sobald du dein Konto erstellt hast, wähle New Project und dann CLI Project. Du erhältst eine Project ID und einen Deploy Key. Halte diese bereit, wir werden sie später verwenden.

Die Formspree CLI installieren

Installiere die Formspree-CLI-Schnittstelle und benenne dann deine Datei statickit.json um, damit sie mit Formspree funktioniert. Erstelle ein Deployment, um Formspree mithilfe des zuvor erwähnten Deploy-Keys über deine Formulare zu informieren.

npm i -g @formspree/cli

Aktualisiere deinen Code, um die Formspree-React-Bibliothek zu verwenden

Du musst die Formspree-React-Bibliothek installieren

npm install @formspree/react

Nun muss <StaticKitProvider> durch einen <FormspreeProvider> ersetzt werden. Erinnerst du dich an den Projekt-Key, den wir erhalten haben? Ersetze dein Attribut site durch project und gib deine Projekt-ID an

Werfen wir einen Blick auf ein Beispiel in einer Next.js-Beispieldatei. Hier ist unsere alte Datei:

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

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

export default App;

Und nachdem wir alles migriert haben, ist hier die neue Datei:

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

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

export default App;

In allen Dateien mit deinen Formularen müssen wir jetzt nur noch die richtige Bibliothek verwenden. Du kannst deine Codebasis durchsuchen und einfach @statickit/react durch @formspree/react ersetzen. So könnte ein Formular aussehen:

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>
  )
}

Das state-Objekt bleibt dasselbe wie bei StaticKit, sodass du alle vorhandenen ValidationError-Komponenten unverändert beibehalten kannst.

Alles testen

Stellen wir sicher, dass alles ordnungsgemäß funktioniert. Besuche dein Dashboard und vergewissere dich, dass alle Formulare, die du in formspree.json definiert hast, erstellt wurden.

Stelle auf deiner Website sicher, dass die zu Formspree migrierten Formulare wie erwartet funktionieren. Sobald du sie absendest, sollten sie in der Übermittlungstabelle deines Formulars erscheinen.

Das war’s! Jetzt kannst du beruhigt sein, denn Formspree kümmert sich um deine Formulare.