トラブルシュート

フォームの送信先が意図と違うときの原因と直し方

HTMLのフォームを送信したら意図しないURLに飛んだり、データが想定外のエンドポイントに送られたりするトラブルは、AIでHTML生成する機会が増えるとともに報告が増えています。form要素のaction属性は一字違いで全く別の動作をするため、送信先の確認と修正の方法を正確に理解しておく必要があります。

よくある原因

最も多いのは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化するか、フォームとエンドポイントを同一ドメイン・同一プロトコルに揃えてください。

関連記事

トラブルシュート

OGP画像が更新されないときの原因と直し方

HTMLページを更新してもOGP画像が変わらない原因と直し方を知りたいWeb制作者向けに、キャッシュの仕組み・デバッグツールの使い方・再発防止の運用を具体的な手順で解説する記事。

5分で読める
トラブルシュート

ファビコンが更新されないときの原因と直し方

ファビコンが更新されない現象に悩むWeb制作者・デザイナー向けに、ブラウザキャッシュ・CDNキャッシュ・HTML記述ミスの3層を切り分けて解決する手順をまとめた記事。

5分で読める
トラブルシュート

QRコードで開くと404になるときの原因と直し方

QRコードを読み取ると404になってしまう問題を解決したい制作者・担当者向けに、URL設定ミス・ページ削除・認証壁の3パターンを切り分けて修正する手順をまとめた記事。

5分で読める
「トラブルシュート」の記事をもっと見る →