HTMLフォームの確認画面とサンクスページの作り方

こんにちは！駆け出しエンジニアのまるです👓🦍

前回の記事では、CSSを使ってフォームの見た目をきれいに整えましたね！

今回はその続きとして、**フォーム送信後の流れ（確認画面とサンクスページ）**を作っていきましょう💡

これができるようになると、

「入力 → 確認 → 送信 → 完了」までの一連の流れを実装できるようになります。

Webサイトに欠かせない、“プロっぽいフォーム”の完成です✨

💡 フォームの流れをおさらいしよう
入力画面を準備しよう（input.html）
確認画面を作ろう（confirm.html）
サンクスページを作ろう（thanks.html）
まとめ

💡 フォームの流れをおさらいしよう

フォームには3つのステップがあります👇

1️⃣ 入力画面（ユーザーが情報を入力）

2️⃣ 確認画面（入力内容を確認して「送信」）

3️⃣ サンクスページ（送信完了のメッセージを表示）

この3つを作ることで、

ユーザーも安心して送信できるフォームになります！

入力画面を準備しよう（input.html）

まずは入力用フォームのHTMLですが

ここでポイントです💡

前回の記事では、フォームのデータ送信に

method=”post” を使っていましたが、

今回は method=”get” を使います。

📘 post と get の違いを知ろう

method	特徴	使う場面
post	データをURLに表示せず、見えない形で送る	本番のフォーム送信や個人情報を含むとき
get	データをURLに表示して送る	ページ遷移でデータを確認したいとき（今回のような確認画面など）

※今回は 「確認画面で入力内容を表示する」 ため、データをURLに渡す必要があります。
そのため、学習用として get を使っています。

📍本番のWebサイトでは、個人情報を扱うことが多いため基本的に post を使うのが安全です。

getはURLに内容が出るけど、そのぶん”次のページで表示”するのが簡単なんだ💡

今回は仕組みを理解するための練習だよ✨️
本番ではpostを使うようにすればOK!

入力画面のHTML👇️

<form action="confirm.html" method="get">
  <label for="name">お名前：</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="message">メッセージ：</label><br>
  <textarea id="message" name="message" rows="5" cols="30"></textarea><br><br>

  <input type="submit" value="確認する">
</form>

👉 action=”confirm.html” は、次に進むページ（確認画面）の指定です。

👇️入力フォームを作成し、入力をしてみました！

確認画面を作ろう（confirm.html）

確認画面では、ユーザーが入力した内容を表示して「送信」または「戻る」を選べるようにします。

ここで初めて JavaScript が登場します💡

JavaScriptを使うと、「入力された内容を次のページに渡して表示する」といった

ちょっとした“動き”を簡単に実現できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>確認画面</title>
</head>
<body>
  <h2>入力内容の確認</h2>
  <p>以下の内容で送信します。よろしいですか？</p>

  <p><strong>お名前：</strong> <span id="confirm-name"></span></p>
  <p><strong>メールアドレス：</strong> <span id="confirm-email"></span></p>
  <p><strong>メッセージ：</strong> <span id="confirm-message"></span></p>

  <form action="thanks.html" method="post">
    <input type="submit" value="送信する">
    <button type="button" onclick="history.back()">戻る</button>
  </form>

  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById("confirm-name").textContent = params.get("name");
    document.getElementById("confirm-email").textContent = params.get("email");
    document.getElementById("confirm-message").textContent = params.get("message");
  </script>
</body>
</html>

👇️入力画面を確認する画面ができました！

💡 ポイント

URLSearchParams という仕組みで、前のページで入力されたデータを取得しています。

JavaScriptを使うと、こういった“入力内容を表示する”ような動きを簡単に作れます✨

サンクスページを作ろう（thanks.html）

最後に送信完了ページを作ります👇

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>送信完了</title>
</head>
<body>
  <h2>送信が完了しました！</h2>
  <p>お問い合わせありがとうございます。</p>
  <p>後日、担当者よりご連絡いたします。</p>

  <a href="input.html">トップに戻る</a>
</body>
</html>

👇️「送信する」ボタンを押すと、サンクスページが表示されました！