ReactでConvertKitフォームを作成する

Reactフォームを構築して、ConvertKit アカウントに購読者を作成する方法を学びます。

1. プロジェクトの準備

プロジェクトにReactヘルパーライブラリをインストールします：

npm install @formspree/react

次に、トップレベルのアプリコンポーネントに FormspreeProvider を追加します。例えば、Next.jsを使用している場合、pages/_app.js ファイルは次のようになります：

import { FormspreeProvider } from '@formspree/react';
function App({ Component, pageProps }) {
  return (
    <FormspreeProvider project="{your-project-id}">
      <Component {...pageProps} />
    </FormspreeProvider>
  );
}
export default App;

2. フォームの設定

formspree.json ファイルに、オプトインフォームを追加します。指定する tags は、ConvertKitアカウントにすでに存在している必要があります。

{
  "forms": {
    "optInForm": {
      "name": "Opt-In Form",
      "actions": [{ 
        "app": "convertkit", 
        "type": "applyTags",
        "tags": ["Newsletter"]
      }]
    }
  }
}

次に、変更をStaticKitにデプロイします：

formspree deploy -k <your-deploy-key>

ConvertKit APIシークレットの保存方法についての手順が表示されます。
ConvertKitアクションについて詳しく学ぶ →

3. フォームの構築

useForm フックを使ってフォームコンポーネントを接続します：

import React from 'react';
import { useForm, ValidationError } from '@formspree/react';
function OptInForm() {
  const [state, handleSubmit] = useForm("optInForm");
  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email Address
      </label>
      <input
        id="email"
        type="email" 
        name="email"
      />
      <ValidationError 
        prefix="Email" 
        field="email"
        errors={state.errors} 
      />
      <button type="submit" disabled={state.submitting}>
        Sign Up
      </button>
    </form>
  );
}
export default OptInForm;

Formspree CLIについて詳しく学ぶ →
FormspreeとReactについて詳しく学ぶ →