Migrar de StaticKit a Formspree

Si ya tienes formularios en StaticKit, ¡empezar con Formspree es rápido y sencillo! Los pasos generalmente son:

1. Crea un proyecto en el panel de Formspree por cada sitio de StaticKit.
2. Instala el CLI de Formspree y actualiza tu código para importar desde las bibliotecas de Formspree React.
3. Reemplaza tu deployment key de StaticKit y la prop site con tu deploy key y project ID de Formspree.
4. Prueba con un nuevo despliegue para asegurarte de que tu nueva integración funciona correctamente.

Crear un proyecto en Formspree

Empieza registrándote para obtener una cuenta en Formspree. Una vez que hayas creado tu cuenta, selecciona New Project y elige CLI Project. Recibirás un Project ID y un Deploy Key. Tenlos a mano, los usaremos más adelante.

Instalar el CLI de Formspree

Instala la interfaz de línea de comandos de Formspree y luego renombra tu archivo statickit.json para que funcione con Formspree. Crea un despliegue para informar a Formspree sobre tus formularios usando el deploy key obtenido antes.

npm i -g @formspree/cli

Actualiza tu código para usar la biblioteca React de Formspree

Necesitarás instalar la biblioteca React de Formspree

npm install @formspree/react

Ahora hay que reemplazar <StaticKitProvider> por <FormspreeProvider>. ¿Recuerdas la project key que recibimos? Reemplaza tu atributo site por project y especifica tu project ID.

Veamos un ejemplo en un archivo de Next.js de muestra. Aquí está nuestro archivo antiguo:

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

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

export default App;

Y ahora, después de migrar todo, así queda el nuevo archivo:

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

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

export default App;

En todos los archivos con tus formularios, ahora solo tenemos que usar la biblioteca correcta. Puedes buscar en tu base de código y simplemente reemplazar @statickit/react por @formspree/react. Así se vería un formulario:

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

El objeto state se mantiene igual que en StaticKit, así que si tienes componentes ValidationError, puedes dejarlos tal cual.

Probar todo

Asegurémonos de que todo funciona correctamente. Visita tu panel y comprueba que todos los formularios que has definido en formspree.json se hayan creado.

En tu sitio web, asegúrate de que los formularios que se han migrado a Formspree funcionen como se espera. Una vez que envíes uno, debería aparecer en la tabla de envíos de tu formulario.

¡Eso es todo! Ahora puedes estar tranquilo sabiendo que Formspree se encargará de tus formularios.