Formspree で React フォームを追加する

ほとんどの React サイトでは、ユーザーデータを集めるフォームが必要です。Formspree ↗ は、フォームの処理と保存を担うバックエンドサービスです。サーバーサイドのコードや Functions を書かずに、サイトへフォームを追加できます。

このチュートリアルでは、React で <form> コンポーネントを作成し、create-react-app で作ったシングルページアプリケーションに追加します。ここでは create-react-app（CRA）を使いますが、考え方は Next.js、Gatsby など、どの React フレームワークにも当てはまります。送信データの収集と、新しい送信が届いたときのメール通知は Formspree に任せます。サーバーサイドの実装は不要です。

サイトは Cloudflare Pages にデプロイします。プラットフォームの概要は はじめに を参照してください。

まず、create-react-app でローカルに新しい React プロジェクトを作成します。次に 新しい GitHub リポジトリ ↗ を作成し、GitHub の場所をリモート先として追加します。

# create new project with create-react-app
npx create-react-app new-app
# enter new directory
cd new-app
# attach git remote
git remote add origin git@github.com:<username>/<repo>.git
# change default branch name
git branch -M main

作成した new-app ディレクトリ内で、React アプリケーションを変更できます。

create-react-app の初期状態は、シンプルな Hello World サイトです。ここに、名前、メールアドレス、メッセージを受け付けるお問い合わせフォームを追加します。フォームのコードは HTML Forms チュートリアルを基にしています。HTML フォームの仕組みと追加の学習リソースは、HTML Forms チュートリアル を参照してください。

まず、ContactForm.js という新しい React コンポーネントを作成し、App.js と同じ src フォルダーに置きます。

project-root/
├─ package.json
└─ src/
   ├─ ContactForm.js
   ├─ App.js
   └─ ...

次に、Formspree のヘルパーライブラリ @formspree/react ↗ を使ってフォームコンポーネントを組み立てます。このライブラリには、フォーム送信イベントの処理とフォーム状態の管理を簡単にする useForm フックがあります。

次のコマンドでインストールします。

npm i @formspree/react

yarn add @formspree/react

pnpm add @formspree/react

bun add @formspree/react

次のコードを ContactForm.js ファイルに貼り付けます。

import { useForm, ValidationError } from "@formspree/react";

export default function ContactForm() {
	const [state, handleSubmit] = useForm("YOUR_FORM_ID");

	if (state.succeeded) {
		return <p>Thanks for your submission!</p>;
	}

	return (
		<form method="POST" onSubmit={handleSubmit}>
			<label htmlFor="name">Full Name</label>
			<input id="name" type="text" name="name" required />
			<ValidationError prefix="Name" field="name" errors={state.errors} />

			<label htmlFor="email">Email Address</label>
			<input id="email" type="email" name="email" required />
			<ValidationError prefix="Email" field="email" errors={state.errors} />

			<label htmlFor="message">Message</label>
			<textarea id="message" name="message" required></textarea>
			<ValidationError prefix="Message" field="message" errors={state.errors} />

			<button type="submit" disabled={state.submitting}>
				Submit
			</button>
			<ValidationError errors={state.errors} />
		</form>
	);
}

現時点では、フォームにプレースホルダー YOUR_FORM_ID が入っています。あとで自分のフォームエンドポイントに置き換えます。

useForm フックは state オブジェクトと handleSubmit 関数を返します。handleSubmit はフォームの onSubmit 属性に渡します。これらを組み合わせると、AJAX でフォームデータを送信し、受け取ったレスポンスに応じてフォーム状態を更新できます。

わかりやすさのため、このフォームにはスタイルを含めていません。スタイルの適用例は、GitHub プロジェクト（https://github.com/formspree/formspree-example-cloudflare-react ↗）で確認できます。

このフォームをサイトに追加するには、コンポーネントをインポートします。

import ContactForm from "./ContactForm";

次に、React コンポーネントとしてページに挿入します。

<ContactForm />

たとえば、src/App.js を次のように更新してフォームを追加できます。

import ContactForm from "./ContactForm"; // <-- import the form component
import logo from "./logo.svg";
import "./App.css";

function App() {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<p>
					Edit <code>src/App.js</code> and save to reload.
				</p>
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
					Learn React
				</a>

				{/* your contact form component goes here */}
				<ContactForm />
			</header>
		</div>
	);
}

export default App;

これで、ユーザーが入力できる複数のフィールドを持つお問い合わせフォーム付きのシングルページアプリケーションができました。ただし、まだ有効なフォームエンドポイントへ送信する設定はしていません。次の Formspree バックエンド で設定します。

React フォーム自体は完成していますが、ユーザーがこのフォームを送信すると Form not found エラーになります。解消するには、新しい Formspree フォームを作成し、固有の ID をフォームの useForm 呼び出しにコピーします。

Formspree フォームを作成するには、Formspree でアカウント登録 ↗ します。次に + New form ボタンで新しいフォームを作成します。新しいフォーム名を Contact-us form にし、フォーム送信を受け取りたいメールアドレスに受信者メールを更新します。最後に Create Form を選びます。

新しいフォームの組み込み手順が表示されます。フォームの hashid（URL 末尾の英数字 8 文字）をコピーし、上で作成した ContactForm コンポーネントの useForm 関数に貼り付けます。

コンポーネントには、次のような行があるはずです。

const [state, handleSubmit] = useForm("mqldaqwx");

/* replace the random-like string above with your own form's ID */

フォームを送信すると、Thank You メッセージが表示されます。フォームデータは Formspree.io ↗ のアカウントに送信されます。

ここから、通知メールアドレス ↗ を更新したり、Google Sheets ↗、Slack ↗ などのプラグインを追加したりして、フォーム処理ロジックを調整できます。

Formspree の設定について、さらに詳しくは次のリソースを参照してください。

• Formspree 全般のヘルプは、Formspree ヘルプサイト ↗ を参照してください。
• React でのフォーム作成の詳細は、formspree-react のドキュメント ↗ を参照してください。
• Next.js、Gatsby、Eleventy などの人気プラットフォームとの連携のヒントは、Formspree ガイド ↗ を参照してください。

これでプロジェクトをデプロイできます。

まだなら、git で進捗を保存し、コミットを GitHub リポジトリへプッシュします。

# Add all files
git add -A
# Commit w/ message
git commit -m "working example"
# Push commit(s) to remote
git push -u origin main

作業内容は GitHub リポジトリにあります。Pages からもアクセスできます。

初めての Cloudflare Pages プロジェクトなら、手順全体は はじめに を参照してください。適切な GitHub リポジトリを選んだあと、次のビルド設定でプロジェクトを構成します。

• Project name – 任意
• Production branch – main
• Framework preset – Create React App
• Build command – npm run build
• Build output directory – build

Save and Deploy を選ぶと、Pages プロジェクトの初回デプロイが始まります。成功すると、固有の *.pages.dev サブドメインと、ライブデモへのリンクが表示されます。

開発用と本番用に、フォームを 2 つ用意すると便利なことがあります。本番データセットを汚したり、クライアントへテスト通知を送ったりせずに、フォームを開発・テストできます。

本番用と開発用のフォームを用意するには、まず Formspree で 2 つ目のフォームを作成します。このフォーム名を Contact Us Testing にし、フォームの hashid ↗ を控えます。

次に、ContactForm.js の useForm フックを、文字列ではなく環境変数で初期化するよう変更します。

const [state, handleSubmit] = useForm(process.env.REACT_APP_FORM_ID);

Cloudflare Pages プロジェクトの設定で、Production 環境と Preview 環境の両方に REACT_APP_FORM_ID 環境変数を追加します。Production には元のフォームの hashid を、Preview 環境には新しいテストフォームの hashid を使います。

これで、git リポジトリのブランチにコミットしてプッシュすると、テストフォーム URL へ送信するフォーム付きの新しいプレビューアプリが作成されます。本番サイトは、引き続き元のフォーム URL へ送信します。

このチュートリアルでは、Cloudflare Pages と Formspree を使って、フォーム送信を処理するサイトを構築してデプロイしました。送信リクエストの処理・保存と通知送信を Formspree とやり取りするフォーム付きの React アプリケーションを作成しました。

このアプリケーションのソースコード全体は、GitHub ↗ で確認できます。

• Formspree で HTML フォームを追加する
• HTML Forms