📬

React + Formspree で GitHub Pages にコンタクトフォームを設置する

5 min read

はじめに

今月、何かのカンファレンスで Formspree のセッションを見かけて、
そのときに、セッションを聴きながら、Formspree のドキュメントを見てました。
ドキュメントを見た感じでは、 React フレンドリー な使用法もあるみたいなので、
GitHub Pages にコンタクトフォームを作る感じで触ってみました。

コンタクトフォーム

実装方法

基本的には、 Formspree 公式ドキュメントの 「How To Build a Contact Form with React」 の通りに進めていけば良さそうです。

Formspree/ドキュメント/How To Build a Contact Form with React

アカウント作成

どのフォームタイプでもアカウント作成が求められるみたいなので、とりあえず作っておきます。

アカウント作成

プロジェクト作成

ログインするとプロジェクトを作成できるようになります。
後に、 バリデーションルール等を formspree.json という設定ファイルに書いたりするので、 Command Line Project で作ったほうが良かったです。
(Dashboard Project では後述の formspree.json を反映するために必要なデプロイキーが発行されないよう?です。)

プロジェクト作成

パッケージインストール

フォームバリデーションも含まれているパッケージです。

yarn add @formspree/react

また、Formspree の CLI パッケージもインストールしておきます。

yarn add -D @formspree/cli

フォームの設定 formspree.json

formspree.json
{
  "forms": {
    "form-name-in-code": {
      "name": "form name in dashboard",
      "actions": [{ "type": "email", "to": "your_email_address" }],
      "fields": {
        "email": {"type": "email", "required": true},
        "message": {"type": "text", "required": true}
      }
    }
  }
}

フォーム名を入れる箇所が二箇所あって、

  • form-name-in-code
    • コード内の useForm の引数文字列として使用し、post先URLの一部としても使われています。
  • form name in dashboard
    • ダッシュボードの表示等に使われているフォーム名のようです。

その他、 formspree.json については以下のドキュメントを参照してください。

Formspree/ドキュメント/The formspree json File

フォーム設定の反映

formspree.json を書き終えたら、

yarn formspree deploy -k <deploy-key>

でフォーム設定を反映します。

コード

書いたコードは余計なものが付きすぎているので、Formspree/ドキュメント/The Formspree React library より引用します。

プロバイダ

CRAでは index.js 、 Next.jsでは _app.js のあたりに以下のコードを書けば良いと思います。
{your-project-id} の箇所は、Formspree のダッシュボードのフォーム設定画面で拾える、 project-id を入れます。
設定画面で endpoint として表示されているURL中の https://formspree.io/p/ の後の 数字列 です。

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

フォームコンポーネント

バリデーション

バリデーションは下記のようなコードで、上図のような感じになります。

ContactForm.js
import React from 'react';
import { useForm, ValidationError } from '@formspree/react';

function ContactForm() {
  const [state, handleSubmit] = useForm("form-name-in-code");
  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}
      />
      <textarea
        id="message"
        name="message"
      />
      <ValidationError
        prefix="Message"
        field="message"
        errors={state.errors}
      />
      <button type="submit" disabled={state.submitting}>
        Submit
      </button>
    </form>
  );
}
export default ContactForm;

ドメイン制限、プラグイン、統計、プラン

その他、機能的な部分をざっと記載します。

ドメイン制限

domain restriction

フォームを公開するときは、一応、ドメイン制限を有効にしていたほうが良いです。
設定は、 プロジェクト の設定からです。(フォームの設定ではなく)

プラグイン

プラグイン

フリープランでも、 Slack、Stripe(test mode)の連携はできます。
Stripe(live mode)や他のプラグインは有料プランで有効にできるようです。
例として、Slack 連携をすると、以下のような通知が来ます。

slack notification

統計

statistics

フォームの送信日時、項目を確認できたり、スパム設定等もできます。

プラン

フリープランでは、 50通/月 のフォーム送信まで可能です。
月当たりの送信数やファイルアップロードや advanced なスパム設定やプラグイン等の違いで、
有料プランは、 Gold , Platinum があるようです。

Formspree/plan

完成したフォーム見本

フォームを送信しても、私のメールアドレスに送られてくるだけなので、中途半端な動作確認しかできませんが、一応載せておきます。

https://uitspitss.github.io/gh-pages-formspree-example/

Discussion

ログインするとコメントできます