📬

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

2020/10/30に公開

React

formspree

tech

はじめに

今月、何かのカンファレンスで 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;