よくある原因
最も多いのはAIが生成したHTMLのform actionが`https://formspree.io/f/XXXX`や`https://api.example.com/contact`などのプレースホルダーのままになっているケースです。このURLに送信するとデータが第三者サービスに届くか、存在しないエンドポイントで404エラーになります。AIの出力を使うときは必ずaction属性を自分の正しい送信先に書き換えてから使います。
もう一つは相対パスと絶対パスの混同です。`action="/submit"`とした場合、ローカルでは`localhost/submit`に送られ、本番では`example.com/submit`に送られます。一方`action="submit"`(スラッシュなし)は現在のパスに相対的になり、ページのURLが`/contact/`なら`/contact/submit`に送られます。意図したエンドポイントに合わせてパスを明示的に設定します。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
HTMLをテキストエディタで開き、`action=`を検索して送信先URLを全件確認します。プレースホルダー(YOUR_ENDPOINT、FORM_ID等)が残っていれば即座に修正します。フォームが複数ある場合は全て確認し、意図した送信先になっているかをリストアップして照合します。
ブラウザの開発者ツール(NetworkタブをXHRでフィルタ)を開いた状態でフォームを送信し、実際のリクエスト先URLを確認します。Headersタブの「Request URL」が意図したエンドポイントと一致しているかを目視確認するのが最も確実な検証方法です。想定と異なるURLに送信されていた場合はHTMLのaction属性を修正します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手から「フォームを送信したら変なページに飛んだ」と報告を受けたとき、「どのURLに飛びましたか」と遷移先URLを確認します。遷移先URLがわかれば、どのエンドポイントに送信されているかが判明し、action属性の修正方針が立てられます。
「フォームを送ったが何の反応もなかった」という報告の場合、サーバー側のエンドポイントが存在しないか、CORS設定でリクエストが弾かれている可能性があります。相手にブラウザのConsoleタブを開いてもらい、エラーメッセージを確認してもらうことで原因を特定できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
HTMLを公開する前のチェックリストに「form actionの送信先URLを確認する」を必ず加えます。特にAIが生成したHTMLはプレースホルダーが残りやすいため、公開前に`action=`で全文検索して確認する手順を必須にします。
フォームの送信先はHTMLに直書きせず、環境変数やサーバー設定から注入する設計にすると、環境ごとの差し替えが容易になりミスも減ります。静的HTMLで運用する場合は、テスト用と本番用でファイルを分けるか、ビルドスクリプトで環境変数を埋め込む仕組みを用意します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
フォームのaction属性を空にしたら現在のページのURLに送信されました。意図した動作ですか?
action属性が空(action="")または省略されている場合、フォームは現在のページ自身に送信されます。サーバーサイドでフォームデータを処理するなら意図した動作ですが、静的HTMLでは処理できないためデータが消えます。送信先のエンドポイントURLを必ず明示してください。
AIが生成したHTMLのaction属性にformspree.ioのURLが入っていました。使っても大丈夫ですか?
Formspreeは正規のフォーム処理サービスですが、AIが生成したURL(/f/xxxx部分)は架空のIDです。Formspreeを使いたい場合は公式サイトでアカウントを作成し、自分のフォームIDを取得してURLを差し替えてください。架空IDのまま送信するとデータが消失します。
フォームのaction URLをHTTPにしたらChromeに警告が出ました。
HTTPSのページからHTTPのエンドポイントにフォームを送信しようとするとMixed ContentとしてChromeがブロックします。送信先エンドポイントもHTTPS化するか、フォームとエンドポイントを同一ドメイン・同一プロトコルに揃えてください。