StaticKitからFormspreeへの移行

すでに StaticKit のフォームをお持ちの場合、Formspree への移行は素早く簡単に行えます！手順の概要は以下のとおりです：

StaticKit の各サイトに対して、Formspreeダッシュボードでプロジェクトを作成します。
Formspree CLI をインストールし、Formspree React ライブラリからインポートするようにコードを更新します。
StaticKit のデプロイキーと site プロパティを、Formspree のデプロイキーとプロジェクトIDに置き換えます。
新しいデプロイでテストして、新しい統合が正しく機能することを確認します。

Formspreeでプロジェクトを作成する

まず、Formspree のアカウントを登録します。アカウントを作成したら、New Project を選択して CLI Project を選びます。Project ID と Deploy Key が発行されます。後ほど使用しますので、手元に置いておいてください。

Formspree CLI のインストール

Formspree CLI インターフェースをインストールし、statickit.json ファイルを Formspree で使用できるようにリネームします。先ほどのデプロイキーを使用してデプロイを実行し、Formspree にフォームの情報を伝えます。

npm i -g @formspree/cli

Formspree React ライブラリを使用するようにコードを更新する

Formspree React ライブラリをインストールする必要があります。

npm install @formspree/react

次に、<StaticKitProvider> を <FormspreeProvider> に置き換える必要があります。先ほど受け取ったプロジェクトキーを覚えていますか？site 属性を project に置き換え、プロジェクトIDを指定します。

サンプルの Next.js ファイルを例に見てみましょう。以下が移行前のファイルです：

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

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

export default App;

すべての移行が完了した後の新しいファイルはこちらです：

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

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

export default App;

フォームが含まれるすべてのファイルで、正しいライブラリを使用するだけです。コードベースを検索して、@statickit/react を @formspree/react に一括置換できます。フォームの例は次のようになります：

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

state オブジェクトは StaticKit と同じ構造を保っているため、ValidationError コンポーネントを使用している場合はそのまま利用できます。

すべてをテストする

すべてが正しく動作することを確認しましょう。ダッシュボードにアクセスして、formspree.json に定義したすべてのフォームが作成されていることを確認します。

ウェブサイト上で、Formspree に移行されたフォームが期待どおりに動作することを確認してください。送信すると、フォームの送信テーブルに表示されるはずです。

以上です！これで Formspree がフォームを管理してくれるので、安心してご利用いただけます。