コンテンツにスキップ

Formspreeを使ったReactフォームの追加

Last reviewed: almost 3 years ago

ほとんどすべてのReactウェブサイトには、ユーザーデータを収集するためのフォームが必要です。Formspree ↗は、フォームの処理と保存を行うバックエンドサービスで、開発者がサーバーサイドのコードや関数を書くことなく、ウェブサイトにフォームを含めることを可能にします。

このチュートリアルでは、Reactを使用して<form>コンポーネントを作成し、create-react-appで構築されたシングルページアプリケーションに追加します。create-react-app（CRA）を使用していますが、概念はNext.js、Gatsbyなどの他のReactフレームワークにも適用されます。Formspreeを使用して、送信されたデータを収集し、新しい送信が到着したときにメール通知を送信します。サーバーサイドのコーディングは必要ありません。

サイトをCloudflare Pagesにデプロイします。プラットフォームに慣れるために、はじめにガイドを参照してください。

セットアップ

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

Terminal window
# create-react-appで新しいプロジェクトを作成
npx create-react-app new-app
# 新しいディレクトリに移動
cd new-app
# gitリモートを追加
git remote add origin git@github.com:<username>/<repo>.git
# デフォルトのブランチ名を変更
git branch -M main

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

フロントエンドコード

create-react-appのスタートポイントには、シンプルなHello Worldウェブサイトが含まれています。名前、メールアドレス、メッセージを受け付ける「お問い合わせ」フォームを追加します。フォームコードはHTMLフォームチュートリアルから適応されています。HTMLフォームの動作や追加の学習リソースについての詳細な説明は、HTMLフォームチュートリアルを参照してください。

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

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

次に、Formspreeのヘルパーライブラリ@formspree/react ↗を使用してフォームコンポーネントを構築します。このライブラリには、フォーム送信イベントの処理とフォーム状態の管理を簡素化するためのuseFormフックが含まれています。

以下のコマンドでインストールします：

Terminal window
npm install --save @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>ご送信ありがとうございます！</p>;
  }


  return (
    <form method="POST" onSubmit={handleSubmit}>
      <label htmlFor="name">フルネーム</label>
      <input id="name" type="text" name="name" required />
      <ValidationError prefix="名前" field="name" errors={state.errors} />


      <label htmlFor="email">メールアドレス</label>
      <input id="email" type="email" name="email" required />
      <ValidationError prefix="メール" field="email" errors={state.errors} />


      <label htmlFor="message">メッセージ</label>
      <textarea id="message" name="message" required></textarea>
      <ValidationError prefix="メッセージ" field="message" errors={state.errors} />


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

現在、フォームにはプレースホルダーYOUR_FORM_IDが含まれています。この部分は、後でこのチュートリアルの中で自分のフォームエンドポイントに置き換えます。

useFormフックは、stateオブジェクトと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 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>
          <code>src/App.js</code>を編集して保存すると再読み込みされます。
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Reactを学ぶ
        </a>


        {/* お問い合わせフォームコンポーネントがここに入ります */}
        <ContactForm />
      </header>
    </div>
  );
}


export default App;

これで、ユーザーが記入するためのいくつかのフィールドを含む「お問い合わせ」フォームを持つシングルページアプリケーションが完成しました。しかし、まだフォームを有効なフォームエンドポイントに送信するように設定していません。次のセクションでそれを行います（#the-formspree-back-end）。

Formspreeバックエンド

Reactフォームは完成しましたが、ユーザーがこのフォームを送信すると、Form not foundエラーが表示されます。これを修正するには、新しいFormspreeフォームを作成し、そのユニークIDをフォームのuseForm呼び出しにコピーします。

Formspreeフォームを作成するには、Formspreeにアカウントを登録 ↗します。次に、+ 新しいフォームボタンを使用して新しいフォームを作成します。新しいフォームにContact-us formという名前を付け、フォーム送信を受け取りたいメールアドレスを更新します。最後に、フォームを作成を選択します。

Formspreeフォームの作成

新しいフォームを統合する方法に関する指示が表示されます。フォームのhashid（URLの最後の8文字の英数字）をコピーし、上記で作成したContactFormコンポーネントのuseForm関数に貼り付けます。

ContactFormコンポーネントで使用するためにコピーできる新しく生成されたフォームエンドポイント

コンポーネントには、次のような行が含まれているはずです：

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


/* 上記のランダムな文字列を自分のフォームのIDに置き換えます */

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

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

Formspreeの設定に関するさらなるヘルプは、以下のリソースを参照してください：

デプロイ

これでプロジェクトをデプロイする準備が整いました。

まだ行っていない場合は、git内で進捗を保存し、コミットをGitHubリポジトリにプッシュします：

Terminal window
# すべてのファイルを追加
git add -A
# メッセージ付きでコミット
git commit -m "working example"
# リモートにコミットをプッシュ
git push -u origin main

これで、あなたの作業はGitHubリポジトリ内にあり、Pagesもそれにアクセスできるようになります。

これが初めてのCloudflare Pagesプロジェクトである場合は、はじめにガイドを参照して完全な手順を確認してください。適切なGitHubリポジトリを選択した後、次のビルド設定でプロジェクトを構成する必要があります：

  • プロジェクト名 – お好きな名前
  • プロダクションブランチ – main
  • フレームワークプリセット – Create React App
  • ビルドコマンド – npm run build
  • ビルド出力ディレクトリ – build

保存してデプロイを選択すると、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プロジェクトの設定で、REACT_APP_FORM_ID環境変数をプロダクション環境とプレビュー環境の両方に追加します。プロダクションには元のフォームのhashidを、プレビュー環境には新しいテストフォームのhashidを使用します：

プロダクションおよびプレビュー環境の環境変数の編集オプション

これで、gitリポジトリのブランチに変更をコミットしてプッシュすると、テストフォームURLに送信するフォームを持つ新しいプレビューアプリが作成されます。ただし、本番ウェブサイトは元のフォームURLに送信し続けます。

このチュートリアルでは、Cloudflare PagesとFormspreeを使用してフォーム送信を処理するウェブサイトを構築し、デプロイしました。Formspreeと通信して送信リクエストを処理および保存し、通知を送信するフォームを持つReactアプリケーションを作成しました。

このアプリケーションの完全なソースコードを確認したい場合は、GitHub ↗で見つけることができます。

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings