Migrating from StaticKit to Formspree

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.

npm i -g @formspree/cli
mv statickit.json formspree.json
formspree deploy -k {deploy-key}

Update your code to use the Formspree React library

You'll need to install the Formspree React library

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:

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:

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:

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.