VCA

メールを受け取る問い合わせフォームを作る

静的サイトにはバックエンドがない——訪問者の送信は誰が受け取る？$0 の3つの方法と、ボットに荒らされない基本対策。

公開日 更新日 レビュー日 約2分で読了編集方針#実践ガイド#フォーム#フロントエンド

ひとことで言うと

問い合わせ受信は簡単そうで、難所は「静的サイトにバックエンドがない」こと。誰が受け取るか、どう濫用を防ぐかを扱う。

作れるもの

実際にメッセージが届く問い合わせフォーム。静的サイトでどの受信方法を使い、どんな濫用対策を入れるかが分かる。

なぜフォームは簡単ではないのか

入力欄を作るのは簡単。難しいのは「送信ボタンを押した後、そのメッセージはどこへ行くのか」です。静的サイトは画面だけでバックエンドがなく、送信を自分で処理できません。だから問題はフォームの見た目ではなく、誰が受け取るかです。

$0 で受け取る3つの方法

  1. フォームサービス：送信先を第三者サービス（多くは無料枠あり）に向ける。受信して自分の受信箱へ転送してくれます。最速、バックエンド不要。
  2. Cloudflare Pages Functions：サイトの隣に小さなバックエンド関数を置いて受信し、メール送信やDB保存をします。無料枠内、第三者に依存しません。
  3. mailto リンク：最も簡素。クリックでユーザーのメールアプリが開きます。バックエンド不要ですが体験が悪く、迷惑メール扱いされやすい。

最速で公開したい初心者はフォームサービス、制御と将来のDBが欲しいなら Pages Functions。

必ず入れる濫用対策

公開フォームはボットに狙われます。最低限：

  • 入力検証：メール形式・必須・長さ上限——フロントで一段、受信側でもう一段（フロントの検証は迂回されうる）。
  • honeypot（隠しフィールド）：人には見えずボットだけが入力する隠しフィールド。入力があれば破棄。
  • レート制限：同一送信元の短時間の回数を制限し、荒らしを防ぐ。
  • 宛先メールをフロントに直書きしない：バックエンド／サービス設定に置く。さもないとメールをクローラーに公開することになります。

AIにはこう言う

受信方法・必要なフィールド・「honeypot ＋ 検証 ＋ レート制限を入れて」を明確に伝えてから実装させます。「問い合わせフォームを作って」だけだと、受信者なし・濫用対策なしのフロントが返りがちです。

次のステップ

よくある質問

静的サイトで本当に問い合わせフォームを作れる？

できます。フォームの「見た目」は静的サイトでも置けます。足りないのは「送信を誰が受け取るか」。送信先をフォームサービスや自前の Cloudflare Pages Functions に向ければOK——表示は静的ページ、受信はサービスや関数が担います。

フロントで検証したのに、なぜバックエンドでも再検証？

フロントの検証は迂回できるからです。攻撃者はあなたのページを使わず、受信側へ任意のデータを直接送れます。フロント検証はUX（即時フィードバック）のため。本当の関門は受信側でもう一度——「クライアント入力を信頼しない」基本原則です。

参考資料

  1. <form> — MDN Web Docs — Mozilla
  2. Cloudflare Pages Functions — Cloudflare