# Migrar de StaticKit a Formspree

> Formspree Docs · Usar el CLI · 14 de julio de 2023

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.

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

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

Necesitarás instalar la biblioteca React de Formspree

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

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

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

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

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.