# Migrating from StaticKit to Formspree

> Formspree Docs · Using the CLI · Updated July 14, 2023

If you already have StaticKit forms, getting started with Formspree is quick and easy! The steps generally follow:

1.  Create a project with Formspree's dashboard for each StaticKit site.
2.  Install the Formspree CLI and update your code to import from Formspree React libraries.
3.  Replace your StaticKit deployment key and site prop with your Formspree deploy key and project ID.
4.  Test with a new deployment to ensure your new integration works correctly.

## Creating a project on Formspree

Start by registering for an account with Formspree. Once you have created your account, select **New Project** and choose **CLI Project**. You'll be given a _Project ID_ and _Deploy Key_. Keep these handy, we'll be using them later.

## Install the Formspree CLI

Install the Formspree CLI interface then rename your `statickit.json` file to work with Formspree. Create a deployment so that you tell Formspree about your forms using the deploy key from earlier.

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

## Update your code to use the Formspree React library

You'll need to install the Formspree React library

```shell
npm install @formspree/react
```

Now the `<StaticKitProvider>` needs to be replaced with a `<FormspreeProvider>`. Remember that project key we received? Replace your `site` attribute with `project` and specify your project ID

Let's take a look at an example in a sample Next.js file. Here's our old file:

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

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

export default App;
```

And now after we migrate everything, here's the new file:

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

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

export default App;
```

In all the files with your forms, we just need to use the right library now. You can search your codebase and simply replace `@statickit/react` with `@formspree/react`. Here's what a form might look like:

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

The `state` object remains the same as StaticKit, so if you have any `ValidationError` components, you can keep them as-is.

## Test everything

Let's make sure everything works properly. Visit your dashboard and ensure that all the forms you've defined in `formspree.json` have been created.

On your website, make sure that the forms that have been migrated to Formspree work as expected. Once you submit, they should show up in your form's submission table.

That's it! Now you can rest easy knowing that Formspree will handle your forms for you.