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

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

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

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

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

　入力 → 確認 → 送信 → 完了　

という、
Webサイトでよく見る”プロっぽいフォーム”が完成します✨️

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

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

まずは、全体の流れを整理しておきましょう👇

実はフォームには、
大きく分けて３つのステップがあります。

1️⃣ 入力画面（ユーザーが情報を入力）
2️⃣ 確認画面（入力内容をチェック）
3️⃣ サンクスページ（送信完了を伝える）

この３ステップがあることで、
ユーザーは安心して送信できるようになります！

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

ではまず、
入力用フォームから作っていきましょう。

ここで、ひとつ大事なポイントがあります👇️

前回の記事では、フォームのデータ送信に
method=”post” を使っていましたよね。

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

📘 post と get の違い

method	特徴	使う場面
post	データがURLに出ない	本番・個人情報
get	データがURLに出る	確認画面など

👉️今回は
「次のページで入力内容を表示する」ため、
学習用として get を使用しています。

※実際のWebサイトでは
個人情報を扱う場面は post が基本です。

今回は仕組みを理解するための練習！
本番では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を使うと、

前のページの入力内容を取得する
その内容を画面に表示する

といった、
「動きのある処理」を簡単に作れます。

【確認画面のHTML＋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>

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

💡 ポイント解説

URL SearchParams
→URLに含まれるデータを取り出す仕組み
params.get(“name”)
→name欄の入力内容を取得

サンクスページを作ろう（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>

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