フォームの送信完了なのに届かない｜入力・保存・通知の3段階で切り分ける

1. 「送信できた」を3段階に分ける

フォームの不具合は、「送信完了と出たのに、連絡が来ない」という形で気づくことが多くあります。原因を探すときは、次の3段階に分けます。

②と③の確認を省くと、「届いていない問い合わせ」に気づけません。公開前のテスト送信で、3段階すべてを一度確認しておきます。

2. 静的なサイトには、フォームの受け口が別に必要

HTMLだけのサイト（静的サイト）は、入力欄を表示できても、送られた内容を受け取る仕組みを持ちません。受け取る処理をどこが担当するかを、先に決める必要があります。次の2つの例を、公式資料で確認しました。

Netlify Forms

公式資料によると、Netlifyの管理画面でフォームの検出を有効にすると、公開のたびにHTMLが調べられ、フォームが見つかります。HTMLのform要素にdata-netlify="true"（またはnetlify）を付け、複数のフォームがあればnameを分けます。

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">送信</button>
</form>

JavaScriptで画面に描かれるフォームは、公開時の検出で見つかりません。公式資料は、同じ入力名を持つ隠しの静的HTMLフォームを置くか、描いたフォームにform-nameの隠し入力を入れるよう案内しています。

Cloudflare Pages

Cloudflareの公式チュートリアルでは、フォームの送信先（例：/api/submit）を、Pages Functionsで自分で書いています。今回確認したチュートリアルには、Netlify Formsのようなフォーム検出機能の記載はありません。送られた内容を保存・転送する処理も、自分で用意する前提です。チュートリアルの例は、受け取った項目を返すだけで、保存や転送は行っていません。

3. Netlify Formsで確認する点

公式資料に書かれている内容から、段階ごとの確認点を整理します。

通知メールが受信箱に見当たらないとき、公式の通知の資料には、迷惑メールに分類される場合の記載がありません。まず管理画面に内容が残っているかを見て、残っていれば、メールの迷惑メールフォルダと、上の送信元アドレスの受信設定を確認します。

迷惑メール対策として、honeypotを使う場合は、form要素にnetlify-honeypotを付け、人間には見えない入力欄を1つ足します。そこに値が入った送信は、受け付けられません。

4. 公開前のテスト送信の手順

1. 公開用のURLで、実際に使うメールアドレス以外の名前（例：テスト太郎）を入力して送る。
2. 送信直後の画面に、完了の表示か、エラーが出るかを記録する（①）。
3. 1〜2分後に、受付側の管理画面を開き、送った内容が残っているかを見る（②）。迷惑判定の一覧も見る。
4. 通知の宛先のメールを開き、通知が届いたか、迷惑メールフォルダに入っていないかを見る（③）。
5. 返信が必要な場合は、通知メールから返信し、送信者に届く宛先になっているかを確かめる。
6. テスト送信は、本物の問い合わせと混ざらないように、件名や名前に「テスト」と入れ、確認後に管理画面から削除する。

5. 個人情報を集めるときに必要なこと

氏名やメールアドレスを集めるフォームを置くなら、集める項目、使う目的、保存する場所と期間、削除する方法を、サイト上に書きます。サービスを変えたときは、記載も更新します。「フォームを付けた」だけで公開すると、利用者に何が起きているかが伝わりません。

フォームの有無は、サイトの目的によって決めます。電話やメール、外部の予約サービスへの案内だけで足りるなら、フォームを置かない選択もあります。公開前の確認項目は、公開前チェックとチェックリストにまとめています。