ほぼすべての Web サイトは、シンプルな HTML のポートフォリオページでも複雑な JavaScript アプリケーションでも、ユーザーデータを集めるフォームが必要です。Formspree ↗ は、フォームの処理と保存を行うバックエンドサービスです。サーバーサイドのコードや Functions を書かずに、Web サイトにフォームを置けます。
このチュートリアルでは、プレーンな HTML と CSS で <form> を作成し、Cloudflare Pages でホストする静的 HTML サイトに追加します。プラットフォームの概要は はじめに を参照してください。JavaScript やバックエンドのコーディングなしで、Formspree が送信データを収集し、新しい送信が届いたときにメール通知を送ります。
まず 新しい GitHub リポジトリ ↗ を作成します。次にローカルに新しいディレクトリを作り、git を初期化し、GitHub の場所をリモート先として追加します。
# create new directory
mkdir new-project
# enter new directory
cd new-project
# initialize git
git init
# attach remote
git remote add origin [email protected]:<username>/<repo>.git
# change default branch name
git branch -M mainこれで、作成した new-project ディレクトリで作業を始められます。
このサンプルプロジェクトでは、プレーンな HTML だけを使います。ホームページには、名前、メールアドレス、メッセージを受け付けるお問い合わせフォームを置きます。
フォームのコード:
<form method="POST" action="/">
<label for="name">Full Name</label>
<input id="name" type="text" name="name" pattern="[A-Za-z]+" required />
<label for="email">Email Address</label>
<input id="email" type="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>action 属性は、フォームデータの送信先を決めます。あとで Formspree に送るよう更新します。ユーザーのデータを取得するには、すべての <input> タグに一意の name が必要です。スクリーンリーダーなどのアクセシビリティツールで <label> と対応する <input> を結びつけるには、for と id の値を一致させます。
このフォームをサイトに追加するには、まずプロジェクトディレクトリに public/index.html を作成します。public ディレクトリにはフロントエンドのアセットをすべて置き、index.html がサイトのホームページになります。
上のフォームを含む次の内容を、public/index.html にコピーして貼り付けます。
<html lang="en">
<head>
<meta charset="utf8" />
<title>Form Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<!-- the form from above -->
<form method="POST" action="/">
<label for="name">Full Name</label>
<input id="name" type="text" name="name" pattern="[A-Za-z]+" required />
<label for="email">Email Address</label>
<input id="email" type="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>これで、ユーザーが入力する複数のフィールドを持つお問い合わせフォームを含む HTML ドキュメントができました。ただし、フォームデータを処理できるサーバーへ action 属性をまだ設定していません。このチュートリアルの次のセクションで設定します。
HTML フォームは完成していますが、ユーザーが送信すると、データは / URL への POST リクエストとして送られます。その URL でデータを処理するサーバーはないため、エラーになります。修正するには、新しい Formspree フォームを作成し、その一意の URL をフォームの action にコピーします。
Formspree フォームを作成するには、Formspree のアカウント ↗ に登録します。
次に、+ New form ボタンで新しいフォームを作成します。名前を Contact-us form にし、フォーム送信を受け取りたいメールアドレスに受信者メールを更新します。Create Form を選択します。
新しいフォームの組み込み手順が表示されます。
Form Endpoint URL をコピーし、上で作成したフォームの action 属性に貼り付けます。
<form method="POST" action="https://formspree.io/f/mqldaqwx">
<!-- replace with your own formspree endpoint -->
</form>フォームを送信すると、Thank You ページへリダイレクトされます。フォームデータは Formspree.io ↗ のアカウントに送信されます。
フォーム処理のロジックを調整して、リダイレクトページ ↗ を変更したり、通知メールアドレス ↗ を更新したり、Google Sheets ↗、Slack ↗ などのプラグインを追加したりできます。
Formspree のセットアップについて、詳しくは次のリソースを参照してください。
- Formspree 全般のヘルプは、Formspree ヘルプサイト ↗ を参照してください。
- HTML フォームの例とアイデアは、Formspree フォームライブラリ ↗ を確認してください。
- Next.js、Gatsby、Eleventy などの人気プラットフォームと Formspree を統合するヒントは、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 – None
- Build command – None / 空
- Build output directory –
public
Save and Deploy を選択すると、Pages プロジェクトの初回デプロイが始まります。成功すると、一意の *.pages.dev サブドメインとライブデモへのリンクが表示されます。
このチュートリアルでは、Cloudflare Pages と Formspree を使い、フォーム送信を処理する Web サイトを構築してデプロイしました。Formspree と通信して送信リクエストを処理・保存し、通知を送るフォーム付きの静的 HTML ドキュメントを作成しました。
このアプリケーションの完全なソースコードは GitHub ↗ で確認できます。