Migrare da StaticKit a Formspree

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.

npm i -g @formspree/cli

Aggiorna il tuo codice per usare la libreria React di Formspree

Dovrai installare la libreria React di Formspree

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:

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:

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:

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.