コンテンツにスキップ

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

Last reviewed: almost 3 years ago

ほとんどすべてのウェブサイト、シンプルなHTMLポートフォリオページであれ、複雑なJavaScriptアプリケーションであれ、ユーザーデータを収集するためのフォームが必要です。Formspree ↗は、フォームの処理と保存を行うバックエンドサービスであり、開発者がサーバーサイドのコードや関数を書くことなく、ウェブサイトにフォームを含めることを可能にします。

このチュートリアルでは、プレーンHTMLとCSSを使用して<form>を作成し、Cloudflare Pagesにホストされた静的HTMLウェブサイトに追加します。プラットフォームに慣れるために、はじめにガイドを参照してください。Formspreeを使用して、送信されたデータを収集し、新しい送信が到着したときにメール通知を送信します。JavaScriptやバックエンドのコーディングは必要ありません。

セットアップ

まず、新しいGitHubリポジトリ ↗を作成します。次に、マシン上に新しいローカルディレクトリを作成し、gitを初期化し、GitHubの場所をリモート先として追加します：

Terminal window
# 新しいディレクトリを作成
mkdir new-project
# 新しいディレクトリに入る
cd new-project
# gitを初期化
git init
# リモートを追加
git remote add origin git@github.com:<username>/<repo>.git
# デフォルトのブランチ名を変更
git branch -M main

これで、作成したnew-projectディレクトリで作業を開始できます。

ウェブサイトのマークアップ

この例のプロジェクトでは、プレーンHTMLのみを使用します。ホームページには、名前、メールアドレス、メッセージを受け付ける「お問い合わせ」フォームが含まれます。

フォームコード：

<form method="POST" action="/">
  <label for="name">フルネーム</label>
  <input id="name" type="text" name="name" pattern="[A-Za-z]+" required />


  <label for="email">メールアドレス</label>
  <input id="email" type="email" name="email" required />


  <label for="message">メッセージ</label>
  <textarea id="message" name="message" required></textarea>


  <button type="submit">送信</button>
</form>

action属性は、フォームデータが送信される場所を決定します。後でこれを更新して、フォームデータをFormspreeに送信します。すべての<input>タグは、ユーザーのデータをキャプチャするために一意のnameを持っている必要があります。forとidの値は、アクセシビリティツール（スクリーンリーダーなど）のために、対応する<input>と<label>をリンクさせるために一致する必要があります。

このフォームをウェブサイトに追加するには、まずプロジェクトディレクトリ内にpublic/index.htmlを作成します。publicディレクトリにはすべてのフロントエンドアセットが含まれ、index.htmlファイルはウェブサイトのホームページとして機能します。

次の内容をpublic/index.htmlファイルにコピー＆ペーストします。これには上記のフォームが含まれています：

<html lang="en">
  <head>
    <meta charset="utf8" />
    <title>フォームデモ</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <!-- 上記のフォーム -->


    <form method="POST" action="/">
      <label for="name">フルネーム</label>
      <input id="name" type="text" name="name" pattern="[A-Za-z]+" required />


      <label for="email">メールアドレス</label>
      <input id="email" type="email" name="email" required />


      <label for="message">メッセージ</label>
      <textarea id="message" name="message" required></textarea>


      <button type="submit">送信</button>
    </form>
  </body>
</html>

これで、ユーザーが記入するためのいくつかのフィールドを持つ「お問い合わせ」フォームを含むHTMLドキュメントが完成しました。しかし、まだaction属性をフォームデータを処理できるサーバーに設定していません。次のセクションでこれを行います。

Formspreeバックエンド

HTMLフォームは完成しましたが、ユーザーがこのフォームを送信すると、データはPOSTリクエストとして/ URLに送信されます。そのURLにはデータを処理するサーバーが存在しないため、エラーが発生します。これを修正するために、新しいFormspreeフォームを作成し、そのユニークなURLをフォームのactionにコピーします。

Formspreeフォームを作成するには、Formspreeにアカウントを登録 ↗します。

次に、+ 新しいフォームボタンを使って新しいフォームを作成します。名前をお問い合わせフォームとし、受信者のメールアドレスをフォーム送信を受け取りたいメールアドレスに更新します。次に、フォームを作成を選択します。

Formspreeフォームの作成

新しいフォームを統合する方法についての指示が表示されます。

Formspreeエンドポイント

Form Endpoint URLをコピーし、上記で作成したフォームのaction属性に貼り付けます。

<form method="POST" action="https://formspree.io/f/mqldaqwx">
  <!-- 自分のformspreeエンドポイントに置き換えてください -->
</form>

これでフォームを送信すると、感謝のページにリダイレクトされるはずです。フォームデータはFormspree.io ↗のアカウントに送信されます。

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

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

デプロイ

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

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

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

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

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

  • プロジェクト名 – お好きな名前
  • プロダクションブランチ – main
  • フレームワークプリセット – なし
  • ビルドコマンド – なし / 空
  • ビルド出力ディレクトリ – public

保存してデプロイを選択すると、Pagesプロジェクトの最初のデプロイが開始されます。成功すると、ユニークな*.pages.devサブドメインとライブデモへのリンクが表示されます。

このチュートリアルでは、Cloudflare PagesとFormspreeを使用してフォーム送信を処理するウェブサイトを構築し、デプロイしました。Formspreeと通信して送信リクエストを処理し、通知を送信するフォームを含む静的HTMLドキュメントを作成しました。

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

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings