入力内容確認モーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

入力内容確認モーダルウインドウの作り方

入力内容確認モーダルウインドウをHTML・CSS・JavaScriptで作る方法を紹介します。フォームへ入力した内容を送信前にモーダルウインドウへ表示し、「送信する」と「戻る」を選択できるサンプルです。入力ミスを防ぎたいお問い合わせフォームや会員登録フォームなどで利用できます。

このサンプルでは、入力内容をモーダルウインドウへ表示し、送信前に内容を確認できる機能を実装しています。「戻る」を押すと入力画面へ戻り、「送信する」を押くと送信処理へ進める構成です。実際の送信処理は含まれていないため、画面遷移なしで動作を確認できます。

PHPと組み合わせる場合は、「送信する」ボタンからフォームを送信するだけで利用できます。入力内容の確認はJavaScriptで行い、実際の登録処理やメール送信、データベース保存などはPHP側で実装してください。HTML・CSS・JavaScriptの構成はそのまま利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

入力内容確認モーダル

フォームへ入力した内容を、送信前にモーダルウインドウで確認できます。

入力例

name="山田太郎"; email="sample@example.com"; message="資料について詳しく知りたいです。";

入力例はフォームへあらかじめ設定されています。「フォームを表示」をクリックし、「確認画面へ」を押すと入力内容を確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>入力内容確認モーダルウインドウ</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!--
  ==================================================
  このサンプルについて
  ==================================================

  このサンプルはHTML・CSS・JavaScriptのみで動作し、
  フォームへ入力した内容をモーダルウインドウ内で確認できます。

  PHPと組み合わせる場合

  ・form要素のaction属性へ送信先PHPを指定してください。
  ・method属性をpostへ変更してください。
  ・name属性はPHPで受け取る項目名として利用できます。

  例

  action="contact.php"
  method="post"

  入力内容確認後の送信処理や入力チェックなどは、
  PHP側で実装してください。

  ==================================================
  -->

  <!-- 入力内容確認モーダルを開く操作エリア -->
  <div class="confirm-input-modal_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="confirm-input-modal_title">
      入力内容確認モーダル
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="confirm-input-modal_text">
      フォームへ入力した内容を、送信前にモーダルウインドウで確認できます。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="confirm-input-modal_open"
      type="button"
      data-confirm-input-modal-open>
      フォームを表示
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="confirm-input-modal_overlay"
    data-confirm-input-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="confirm-input-modal_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirm-input-modal-title">

      <!-- モーダルを閉じるボタン -->
      <button
        class="confirm-input-modal_close"
        type="button"
        data-confirm-input-modal-close
        aria-label="閉じる">
        ×
      </button>

      <!-- 入力フォーム -->
      <form
        class="confirm-input-modal_form"
        action="#"
        method="get"
        data-confirm-input-modal-form-area>

        <!-- 入力フォームのタイトル -->
        <div
          class="confirm-input-modal_confirm-title"
          id="confirm-input-modal-title">
          入力フォーム
        </div>

        <!-- お名前入力欄 -->
        <label class="confirm-input-modal_label">
          お名前

          <input
            class="confirm-input-modal_input"
            type="text"
            name="name"
            value="山田 太郎"
            required
            data-confirm-input-modal-name>

        </label>

        <!-- メールアドレス入力欄 -->
        <label class="confirm-input-modal_label">
          メールアドレス

          <input
            class="confirm-input-modal_input"
            type="email"
            name="email"
            value="sample@example.com"
            required
            data-confirm-input-modal-email>

        </label>

        <!-- お問い合わせ内容入力欄 -->
        <label class="confirm-input-modal_label">
          お問い合わせ内容

          <textarea
            class="confirm-input-modal_textarea"
            name="message"
            required
            data-confirm-input-modal-message>資料について詳しく知りたいです。</textarea>

        </label>

        <!-- 確認画面へ進むボタン -->
        <button
          class="confirm-input-modal_submit"
          type="button"
          data-confirm-input-modal-show>
          確認画面へ
        </button>

      </form>

      <!-- 入力内容確認エリア -->
      <div
        class="confirm-input-modal_confirm"
        data-confirm-input-modal-confirm-area>

        <!-- 確認画面のタイトル -->
        <div class="confirm-input-modal_confirm-title">
          入力内容確認
        </div>

        <!-- お名前の確認項目 -->
        <p class="confirm-input-modal_confirm-item">

          <span class="confirm-input-modal_confirm-label">
            お名前
          </span>

          <span data-confirm-input-modal-view-name></span>

        </p>

        <!-- メールアドレスの確認項目 -->
        <p class="confirm-input-modal_confirm-item">

          <span class="confirm-input-modal_confirm-label">
            メールアドレス
          </span>

          <span data-confirm-input-modal-view-email></span>

        </p>

        <!-- お問い合わせ内容の確認項目 -->
        <p class="confirm-input-modal_confirm-item">

          <span class="confirm-input-modal_confirm-label">
            お問い合わせ内容
          </span>

          <span data-confirm-input-modal-view-message></span>

        </p>

        <!-- 確認画面の操作ボタン -->
        <div class="confirm-input-modal_buttons">

          <!-- 入力画面へ戻るボタン -->
          <button
            class="confirm-input-modal_back"
            type="button"
            data-confirm-input-modal-back>
            戻る
          </button>

          <!-- 送信ボタン -->
          <button
            class="confirm-input-modal_send"
            type="button"
            data-confirm-input-modal-send>
            送信する
          </button>

        </div>

        <!-- デモ用の送信結果メッセージ -->
        <p
          class="confirm-input-modal_notice"
          data-confirm-input-modal-notice
          role="status">
          デモのため、入力内容は送信されません。
        </p>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくするとページ端の余白が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* 入力内容確認モーダルを開く操作エリア */
.confirm-input-modal_wrap{
  max-width:700px; /* 最大横幅。値を大きくすると操作エリアが広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #e5e7eb; /* 枠線の太さと色 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* タイトル・説明文・ボタンを中央揃え */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* 操作エリアのタイトル */
.confirm-input-modal_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字も大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* 行間。値を大きくすると行間が広がる */
}

/* 操作エリアの説明文 */
.confirm-input-modal_text{
  margin:0 0 20px; /* 下側20pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* モーダルを開くボタン */
.confirm-input-modal_open{
  padding:12px 24px; /* ボタン内側の上下・左右余白。値を大きくするとボタンが大きくなる */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* モーダル背景 */
.confirm-input-modal_overlay{
  display:none; /* 初期状態ではモーダルを非表示 */
  position:fixed; /* モーダル背景を画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:center; /* モーダル本体を縦中央へ配置 */
  justify-content:center; /* モーダル本体を横中央へ配置 */
  padding:20px; /* 画面端との余白。値を大きくすると端との間隔が広がる */
  background:rgba(0,0,0,.6); /* 背景色。最後の.6を大きくすると暗く、小さくすると薄くなる */
  box-sizing:border-box; /* paddingを画面幅に含める */
}

/* モーダル表示状態 */
.confirm-input-modal_overlay.is-active{
  display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}

/* モーダル本体 */
.confirm-input-modal_modal{
  position:relative; /* 閉じるボタンの絶対配置基準 */
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:500px; /* 最大横幅。値を大きくするとモーダルが広がる */
  max-height:90vh; /* 最大高さを画面高さの90%に制限 */
  overflow-y:auto; /* 高さを超えた場合に縦スクロールを表示 */
  padding:48px 28px 28px; /* 上48px・左右28px・下28pxの内側余白 */
  border-radius:18px; /* モーダル本体の角丸 */
  background:#ffffff; /* モーダル本体の背景色 */
  box-shadow:0 20px 50px rgba(0,0,0,.25); /* モーダルの影。数値を大きくすると影が広がる */
  box-sizing:border-box; /* paddingを横幅に含める */
}

/* モーダルを閉じるボタン */
.confirm-input-modal_close{
  position:absolute; /* モーダル右上へ固定配置 */
  top:12px; /* 上端からの位置。値を大きくすると下へ移動する */
  right:12px; /* 右端からの位置。値を大きくすると左へ移動する */
  width:36px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:36px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白をなくす */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:50%; /* ボタンを円形にする */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ×印の文字色 */
  font-size:22px; /* ×印の文字サイズ */
  line-height:1; /* ×印の行間を詰める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 入力フォーム */
.confirm-input-modal_form{
  display:grid; /* フォーム項目を縦方向へ並べる */
  gap:16px; /* 各フォーム項目の間隔。値を大きくすると間隔が広がる */
  text-align:left; /* フォーム内を左揃え */
}

/* 入力欄のラベル */
.confirm-input-modal_label{
  display:grid; /* ラベル文字と入力欄を縦方向へ並べる */
  gap:8px; /* ラベルと入力欄の間隔 */
  color:#374151; /* ラベルの文字色 */
  font-size:14px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベル文字を太字にする */
  line-height:1.5; /* ラベルの行間 */
}

/* テキスト入力欄とテキストエリア */
.confirm-input-modal_input,
.confirm-input-modal_textarea{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:12px; /* 入力欄の内側余白。値を大きくすると入力欄が高くなる */
  border:1px solid #d1d5db; /* 入力欄の枠線 */
  border-radius:8px; /* 入力欄の角丸 */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  font:inherit; /* ページと同じフォントを使用 */
  font-size:15px; /* 入力文字のサイズ */
  line-height:1.5; /* 入力文字の行間 */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* 入力欄へフォーカスした時 */
.confirm-input-modal_input:focus,
.confirm-input-modal_textarea:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,.15); /* フォーカス時の外側ライン */
}

/* お問い合わせ内容入力欄 */
.confirm-input-modal_textarea{
  min-height:120px; /* 最小高さ。値を大きくすると入力欄が高くなる */
  resize:vertical; /* 縦方向のみサイズ変更を許可 */
}

/* 確認画面へ進むボタン */
.confirm-input-modal_submit{
  padding:12px; /* ボタン内側の余白。値を大きくするとボタンが高くなる */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 入力内容確認エリア */
.confirm-input-modal_confirm{
  display:none; /* 初期状態では確認画面を非表示 */
  text-align:left; /* 確認内容を左揃え */
}

/* 入力フォームと確認画面のタイトル */
.confirm-input-modal_confirm-title{
  margin:0 42px 24px 0; /* 右側に閉じるボタン分、下側に24pxの余白を付ける */
  color:#111827; /* タイトルの文字色 */
  font-size:24px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 確認内容の各項目 */
.confirm-input-modal_confirm-item{
  margin:0 0 14px; /* 下側14pxの余白 */
  padding:12px 14px; /* 項目内側の余白 */
  border:1px solid #e5e7eb; /* 項目の枠線 */
  border-radius:8px; /* 項目の角丸 */
  background:#f8fafc; /* 項目の背景色 */
  color:#374151; /* 項目の文字色 */
  font-size:15px; /* 項目の文字サイズ */
  line-height:1.7; /* 項目の行間 */
  overflow-wrap:anywhere; /* 長い文字列を折り返して表示 */
}

/* 確認項目名 */
.confirm-input-modal_confirm-label{
  display:block; /* 項目名を1行で表示 */
  margin-bottom:4px; /* 内容との間隔 */
  color:#111827; /* 項目名の文字色 */
  font-weight:700; /* 項目名を太字にする */
}

/* 確認画面の操作ボタンエリア */
.confirm-input-modal_buttons{
  display:flex; /* 戻るボタンと送信ボタンを横並びにする */
  gap:12px; /* ボタン同士の間隔 */
  margin-top:24px; /* 上側24pxの余白 */
}

/* 戻るボタンと送信ボタンの共通設定 */
.confirm-input-modal_buttons button{
  flex:1; /* 2つのボタンを同じ横幅にする */
  padding:12px; /* ボタン内側の余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 入力画面へ戻るボタン */
.confirm-input-modal_back{
  background:#e5e7eb; /* 戻るボタンの背景色 */
  color:#111827; /* 戻るボタンの文字色 */
}

/* 送信ボタン */
.confirm-input-modal_send{
  background:#2563eb; /* 送信ボタンの背景色 */
  color:#ffffff; /* 送信ボタンの文字色 */
}

/* デモ用送信結果メッセージ */
.confirm-input-modal_notice{
  display:none; /* 初期状態では非表示 */
  margin:20px 0 0; /* 上側20pxの余白 */
  padding:12px 14px; /* メッセージ内側の余白 */
  border-radius:8px; /* メッセージの角丸 */
  background:#eff6ff; /* メッセージの背景色 */
  color:#1e40af; /* メッセージの文字色 */
  font-size:15px; /* メッセージの文字サイズ */
  line-height:1.7; /* メッセージの行間 */
}

/* デモ用送信結果メッセージの表示状態 */
.confirm-input-modal_notice.is-active{
  display:block; /* 表示用クラスが付いた時に表示 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン用の操作エリア */
  .confirm-input-modal_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のモーダル本体 */
  .confirm-input-modal_modal{
    padding:48px 18px 20px; /* 閉じるボタン分の上余白と左右・下余白を設定 */
  }

  /* スマートフォン用の操作ボタン */
  .confirm-input-modal_buttons{
    flex-direction:column; /* 戻るボタンと送信ボタンを縦並びにする */
  }

}

// 入力内容確認モーダルを開くボタンを取得
const confirmInputModalOpen=document.querySelector(
  "[data-confirm-input-modal-open]"
);

// 入力内容確認モーダルを閉じるボタンを取得
const confirmInputModalClose=document.querySelector(
  "[data-confirm-input-modal-close]"
);

// モーダル背景を取得
const confirmInputModalOverlay=document.querySelector(
  "[data-confirm-input-modal-overlay]"
);

// 入力フォームエリアを取得
const confirmInputModalFormArea=document.querySelector(
  "[data-confirm-input-modal-form-area]"
);

// 入力内容確認エリアを取得
const confirmInputModalConfirmArea=document.querySelector(
  "[data-confirm-input-modal-confirm-area]"
);

// お名前入力欄を取得
const confirmInputModalName=document.querySelector(
  "[data-confirm-input-modal-name]"
);

// メールアドレス入力欄を取得
const confirmInputModalEmail=document.querySelector(
  "[data-confirm-input-modal-email]"
);

// お問い合わせ内容入力欄を取得
const confirmInputModalMessage=document.querySelector(
  "[data-confirm-input-modal-message]"
);

// 確認画面のお名前表示欄を取得
const confirmInputModalViewName=document.querySelector(
  "[data-confirm-input-modal-view-name]"
);

// 確認画面のメールアドレス表示欄を取得
const confirmInputModalViewEmail=document.querySelector(
  "[data-confirm-input-modal-view-email]"
);

// 確認画面のお問い合わせ内容表示欄を取得
const confirmInputModalViewMessage=document.querySelector(
  "[data-confirm-input-modal-view-message]"
);

// 確認画面へ進むボタンを取得
const confirmInputModalShow=document.querySelector(
  "[data-confirm-input-modal-show]"
);

// 入力画面へ戻るボタンを取得
const confirmInputModalBack=document.querySelector(
  "[data-confirm-input-modal-back]"
);

// 送信ボタンを取得
const confirmInputModalSend=document.querySelector(
  "[data-confirm-input-modal-send]"
);

// デモ用送信結果メッセージを取得
const confirmInputModalNotice=document.querySelector(
  "[data-confirm-input-modal-notice]"
);

// モーダルを開くボタンをクリックした時
confirmInputModalOpen.addEventListener("click",function(){

  // モーダル背景へ表示用クラスを追加
  confirmInputModalOverlay.classList.add("is-active");

  // 入力画面を表示
  confirmInputModalFormArea.style.display="grid";

  // 確認画面を非表示
  confirmInputModalConfirmArea.style.display="none";

  // デモ用送信結果メッセージを非表示
  confirmInputModalNotice.classList.remove("is-active");

});

// 閉じるボタンをクリックした時
confirmInputModalClose.addEventListener("click",function(){

  // モーダル背景から表示用クラスを削除
  confirmInputModalOverlay.classList.remove("is-active");

});

// モーダル背景をクリックした時
confirmInputModalOverlay.addEventListener("click",function(event){

  // モーダル本体ではなく背景部分をクリックした場合だけ閉じる
  if(event.target===confirmInputModalOverlay){

    // モーダル背景から表示用クラスを削除
    confirmInputModalOverlay.classList.remove("is-active");

  }

});

// 確認画面へ進むボタンをクリックした時
confirmInputModalShow.addEventListener("click",function(){

  // 入力されたお名前を確認画面へ表示
  confirmInputModalViewName.textContent=
    confirmInputModalName.value;

  // 入力されたメールアドレスを確認画面へ表示
  confirmInputModalViewEmail.textContent=
    confirmInputModalEmail.value;

  // 入力されたお問い合わせ内容を確認画面へ表示
  confirmInputModalViewMessage.textContent=
    confirmInputModalMessage.value;

  // デモ用送信結果メッセージを非表示
  confirmInputModalNotice.classList.remove("is-active");

  // 入力フォームを非表示
  confirmInputModalFormArea.style.display="none";

  // 入力内容確認画面を表示
  confirmInputModalConfirmArea.style.display="block";

});

// 戻るボタンをクリックした時
confirmInputModalBack.addEventListener("click",function(){

  // 入力内容確認画面を非表示
  confirmInputModalConfirmArea.style.display="none";

  // 入力フォームを再表示
  confirmInputModalFormArea.style.display="grid";

});

// 送信ボタンをクリックした時
confirmInputModalSend.addEventListener("click",function(){

  // このサンプルでは実際の送信処理を行わないため、
  // デモ用の送信結果メッセージだけを表示
  confirmInputModalNotice.classList.add("is-active");

  // PHPと組み合わせる場合は、
  // HTMLのform要素でaction属性へ送信先PHPを指定し、
  // method属性をpostへ変更する
  //
  // 例
  // action="contact.php"
  // method="post"
  //
  // 入力内容確認後の送信処理や入力チェックなどは、
  // PHP側で実装する

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには入力フォームと入力内容確認モーダルウインドウの構造、CSSにはフォーム・確認画面・ボタン・モーダル全体のデザイン、JavaScriptにはモーダルの開閉、入力内容の反映、入力画面へ戻る処理、デモ用メッセージの表示処理を記述しています。

フォームにはお名前・メールアドレス・お問い合わせ内容の入力欄があり、「確認画面へ」をクリックすると、入力した内容がモーダル内の確認画面へ表示されます。「戻る」をクリックすると入力画面へ戻り、「送信する」をクリックするとデモ用メッセージが表示されます。現在のコードには実際の送信処理は含まれていません。

PHPと組み合わせる場合は、index.htmlのform要素に送信先PHPを指定し、method属性をpostへ変更します。name=”name”、name=”email”、name=”message”はPHP側で受け取る項目名として利用できます。入力内容確認後の送信処理や入力チェックは、送信先PHPで別途実装してください。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
入力例、入力フォーム、入力内容確認画面、戻るボタン、送信ボタン、閉じるボタンを配置します。入力例や初期値、ラベル、ボタン名を変更できます。PHPと組み合わせる場合は、form要素のaction属性へ送信先PHPを指定し、method属性をpostへ変更します。

style.css
モーダルウインドウ、入力フォーム、入力例、確認項目、戻るボタン、送信ボタン、デモ用メッセージなどのデザインを管理します。色、横幅、高さ、余白、角丸、影、文字サイズ、ボタン配置を変更できます。

script.js
モーダルを開く処理、閉じる処理、背景クリックで閉じる処理、入力内容を確認画面へ反映する処理、入力画面へ戻る処理、デモ用送信結果メッセージを表示する処理を管理します。実際の送信処理は行いません。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/index.htmlをブラウザで開きます。「フォームを表示」をクリックすると入力フォームが開きます。入力内容を変更して「確認画面へ」をクリックすると、入力した内容が確認画面へ表示されます。

「戻る」をクリックすると入力内容を保持したまま入力画面へ戻ります。「送信する」をクリックすると、実際には送信せず、デモ用メッセージだけを表示します。

PHPと組み合わせる場合は、index.htmlのform要素を次のように変更します。

action=”#”
method=”get”

を、

action=”contact.php”
method=”post”

へ変更します。送信先のcontact.phpでは、name・email・messageを受け取り、入力内容確認後の送信処理や入力チェックを実装してください。

カスタマイズできる内容
index.htmlでは入力例、初期入力値、項目名、ボタン名、送信先PHPを変更できます。style.cssではモーダルの横幅、入力欄の高さ、入力例のデザイン、確認項目の背景色、ボタン色、余白、角丸、影を変更できます。script.jsでは確認画面へ表示する項目や、戻る・送信ボタンの動作を変更できます。

数値調整
style.cssのmax-width:500px;を変更するとモーダルの最大横幅が変わります。padding:48px 28px 28px;を変更するとモーダル内部の余白が変わります。gap:16px;を変更するとフォーム項目同士の間隔が変わります。min-height:120px;を変更するとお問い合わせ内容入力欄の高さが変わります。width:36px;とheight:36px;を変更すると閉じるボタンの大きさが変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、max-height:90vh、overflow-y:auto、padding、@media (max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではモーダル内部の余白が縮小され、戻るボタンと送信ボタンが縦並びになります。タブレットやPCでは最大横幅を保ったまま中央へ表示されます。