# Von StaticKit zu Formspree migrieren

> Formspree Docs · Die CLI verwenden · 14. Juli 2023

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.

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

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

Du musst die Formspree-React-Bibliothek installieren

```shell
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:

```jsx
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:

```jsx
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:

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

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.