こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトで「お問い合わせ」や「予約申し込み」などのフォームを作成した際、ユーザーにとって大切なのが送信後の体験です。
せっかく入力して送信ボタンを押したのに、
「このまま何も起きないけど、送れたの？」
「エラー？成功？どっち？」
そんな不安を感じさせてしまうと、印象が一気に悪くなってしまいます。
そこでおすすめなのが、フォーム送信完了後に「サンクスページ（ありがとうページ）」へ自動でリダイレクトさせる方法です。
視覚的にも「完了したこと」が明確になり、コンバージョンにも好影響を与えます。
この記事では、JavaScriptを使ってフォーム送信後にスムーズにリダイレクトする方法を、初心者の方にもわかりやすく解説します！
そもそも「サンクスページ」って必要？
多くの方が疑問に思うのが「完了メッセージだけじゃだめ？」という点。
もちろん、画面上に「送信完了しました」と表示させるだけでも最低限の案内にはなります。
ただ、以下のような目的がある場合には、サンクスページへのリダイレクトが非常に有効です。
- Googleアナリティクスのコンバージョン計測に使う
- リマーケティングのタグ設置先として使う
- 追加のご案内（例：SNSフォロー、ダウンロードリンクなど）を案内する
- 二重送信や戻るボタンによる誤動作を防ぐ
つまり、「ありがとうページ」は単なるお礼の表示ではなく、マーケティングや信頼性アップにも直結する要素なんです。
方法①：JavaScriptで送信完了後にリダイレクト
HTML側のフォーム（例）
ここでは event.preventDefault() を使ってブラウザの標準送信を一時的に止め、JavaScript内でリダイレクト処理を行っています。
fetch() や XMLHttpRequest を使った非同期送信とも組み合わせやすく、ユーザー体験を壊さずに丁寧な導線が作れます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
方法②：フォーム送信後にサーバーからJavaScriptで転送
サーバー側でフォームデータを受け取ったあと、JavaScriptで制御してもよいです。
たとえば、PHPで処理したあと、HTMLに下記のようなスクリプトを入れておくと自動でリダイレクトされます。
<script>
window.location.href = "/thanks.html";
</script>ただしこの方法は、「送信成功時」のみ表示されるように条件分岐する必要があるので注意です！
リダイレクト時の注意点
以下の点は、実装時に特に気をつけましょう。
- サンクスページのURLは絶対パス or 相対パスで正しく指定する
- 送信エラー時にも同じページへ飛ばないように処理を分岐する
- 自動送信ロボット対策のためにも、フォームバリデーション（空欄チェックなど）は忘れずに
- サンクスページ自体に「フォーム送信後にしか来れない」ガード処理を入れておくとベター
まとめ：フォーム送信後の導線が信頼をつくる
「送信できたかわからない」「ちゃんと届いた？」という疑問は、ユーザーに不安とストレスを与える原因になります！
だからこそ、サンクスページへのリダイレクトは、たった数行のコードでできるにもかかわらず、UXを格段に高める重要な要素です。
JavaScriptを使えば、フォームの種類やデザインに合わせて柔軟に実装が可能です。
あなたのWebサイトでも、ぜひ取り入れてみてください！
satokotadesignキャンペーン実施中！
