よくある原因
HTMLをAIに生成させた場合、action属性がFormspree・Netlify Forms・SheetMonkeyなど特定の外部サービスのサンプルURLになっていることがあります。そのサービスを使う予定がない場合はデータが送信先不明の外部サービスに届きます。公開前にaction属性を一件ずつ確認することで防げます。
コピペや編集ミスでaction URLの末尾スラッシュが抜けたり、ドメインをtypoしたりするケースも多いです。`https://example.com/submit`と`https://example.com/submit/`は別のURLとして処理される場合があり、サーバー設定によっては片方が404になります。本番送信テストで実際にリクエストが届いているかを必ず確認します。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
チェック1：HTMLソースで全てのform要素のaction属性を確認します。`Ctrl+F`で`action=`を検索し、全件を目視確認します。プレースホルダー文字列（YOUR_、EXAMPLE、sample等）が含まれていたら即座に修正します。
チェック2：ブラウザの開発者ツール→NetworkタブをXHRまたはFetchでフィルタした状態でテスト送信を実行し、実際のリクエスト先URLを確認します。意図したエンドポイントに対してPOSTリクエストが飛んでいるかと、レスポンスのHTTPステータスコード（200が成功）を確認します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
チェック3：共有前に自分以外の一人に送信テストをしてもらいます。テスト送信後に管理側でデータを受信できているか確認します。メールフォームなら確認メールが届いているか、スプレッドシート連携なら行が追加されているかを確認します。
チェック4：相手がモバイルでフォームを使う場合、送信後のリダイレクト先（action URLに指定した送信後遷移先）がモバイルで正常に表示されるかを確認してもらいます。POSTメソッドのフォームは送信後にGETページに遷移するパターンが多いため、リダイレクト後のページがレスポンシブ対応しているかも見てもらいます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
フォームを含むHTMLを作成・公開するたびに本チェックリストを実行するルールを定めます。AIで生成した場合・手書きした場合を問わず、全ての場合にaction属性を検索して確認する手順を標準化します。
フォームの送信先エンドポイントをREADMEやNotionページに記録しておくと、後から担当者が変わったときにaction属性が正しいか確認できます。HTMLの変更履歴をGitで管理し、action属性の変更がdiffで目視確認できる状態にしておくことも有効な運用策です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
Netlify Formsを使っていますが、送信されてもダッシュボードにデータが届きません。
NetlifyFormsはHTMLのname属性とNetlifyが生成するフォームIDをひも付けて動作します。action属性だけでなく、form要素にname属性が設定されているか確認してください。またNetlifyのデプロイ後にフォームページを一度開かないとフォームが認識されません。
フォームのmethod属性をGETにするとURLにデータが載ってしまいます。変えてよいですか？
メールアドレスやパスワードなどの個人情報を送るフォームはmethod="POST"を使ってください。GETはURLにパラメータが付くため、ブラウザ履歴やサーバーログに個人情報が残ります。サーバー側のエンドポイントもPOSTに対応している必要があります。
フォームを送信しても画面が何も変わらず、データが届いているのかわかりません。
JavaScriptでfetch/XHRを使った非同期送信の場合、成功・失敗をユーザーに伝えるUI（メッセージの表示やページ遷移）を実装しないと判断できません。開発者ツールのNetworkタブでリクエストを確認し、200ステータスが返っていれば送信自体は成功しています。