コピペで完結！モーダルウインドウ#12【お問い合わせフォーム付き】

/* ▼お問い合わせフォーム付きモーダルのCSS（全文コメント付き） */

/* ------------------------------------
   デモ全体のラッパー
   - 横幅を最大960pxに制限して中央寄せ
   - 全体の基本フォントと文字色を指定
------------------------------------ */
.demo-wrap{
  max-width:960px;           /* 横幅の上限 */
  margin:0 auto;             /* 中央寄せ（左右中央に配置） */
  padding:0 16px;            /* 左右に16pxの余白を確保 */
  font-family:system-ui,"Noto Sans JP",sans-serif; /* 読みやすいフォント */
  color:#0f172a;             /* 基本文字色（濃いめのネイビー） */
}

/* ------------------------------------
   モーダルを開くボタン
   - ブルー背景＋白文字
   - 丸みのある角とカーソル変更
------------------------------------ */
.demo-wrap .open-btn{
  padding:10px 16px;        /* ボタン内の上下左右余白 */
  background:#0b6bff;       /* 背景色（鮮やかな青） */
  color:#fff;               /* 文字色（白） */
  border:none;              /* デフォルトの枠線を消す */
  border-radius:10px;       /* 角を丸くする */
  cursor:pointer;           /* マウスを重ねたときにポインタ表示 */
}

/* ------------------------------------
   オーバーレイ背景（黒い半透明の層）
   - 初期状態は非表示（display:none）
   - .active が付くと表示（display:grid）
   - 画面全体を覆う黒幕
------------------------------------ */
.demo-wrap .overlay{
  position:fixed;           /* ビューポート全体に固定配置 */
  inset:0;                  /* 上下左右を0に → 画面全体をカバー */
  background:rgba(0,0,0,.55); /* 半透明の黒背景 */
  display:none;             /* 初期状態では非表示 */
  place-items:center;       /* 中央寄せ配置（gridのセンタリング） */
  z-index:9999;             /* 最前面に表示 */
}
/* activeクラスが付いたときに表示される */
.demo-wrap .overlay.active{ display:grid; }

/* ------------------------------------
   ダイアログ本体（白いボックス部分）
   - 最大幅720pxで可変
   - 内側余白あり、角丸、影付き
------------------------------------ */
.demo-wrap .dialog{
  background:#fff;                   /* 背景色：白 */
  border-radius:12px;                /* 角を丸く */
  padding:28px 32px;                 /* 内側余白：上下28px、左右32px */
  max-width:720px;                   /* 最大幅を720pxに制限 */
  width:min(92vw,720px);             /* ビューポート幅が小さい時は92%まで縮む */
  box-shadow:0 24px 60px rgba(0,0,0,.28); /* 影を付けて浮き上がらせる */
}
/* ダイアログ内のすべての要素は box-sizing を border-box に統一 */
.demo-wrap .dialog *{ box-sizing:border-box; }

/* ------------------------------------
   見出し（フォームタイトル）
------------------------------------ */
.demo-wrap .dialog h3{
  margin:0 0 16px;   /* 下に16pxの余白 */
  font-size:20px;    /* 文字サイズ */
  font-weight:700;   /* 太字 */
}

/* ------------------------------------
   入力欄まわり
   - ラベルをブロック表示で上に配置
   - input/textarea の共通デザイン
------------------------------------ */
.demo-wrap .field{ margin:18px 0; } /* 各フィールド上下の余白 */
.demo-wrap .field label{
  display:block;     /* ラベルをブロック化して上に表示 */
  margin:0 0 8px;    /* 下に8pxの余白 */
  font-size:16px;    /* 文字サイズ */
}
.demo-wrap .field input,
.demo-wrap .field textarea{
  display:block;              /* 横幅100%で表示 */
  width:100%;                 /* 横幅を親いっぱいに広げる */
  padding:12px 14px;          /* 内側余白（上下12px 左右14px） */
  border:1px solid #cbd5e1;   /* 薄いグレーの枠線 */
  border-radius:12px;         /* 角を丸く */
  background:#f8fafc;         /* 薄いグレー背景 */
}
/* フォーカス時の効果（青い枠＋影を付ける） */
.demo-wrap .field input:focus,
.demo-wrap .field textarea:focus{
  border-color:#93c5fd;              /* フォーカス時の枠色を水色に */
  box-shadow:0 0 0 4px rgba(147,197,253,.35); /* 青い光の影を周囲に付与 */
  background:#fff;                   /* 背景を白に切り替え */
}
/* テキストエリアのみの追加設定 */
.demo-wrap .field textarea{
  min-height:160px;   /* 最小高さを160pxに固定 */
  resize:vertical;    /* 縦方向のみリサイズ可能 */
}

/* ------------------------------------
   ボタン群（送信・閉じる）
   - flexで横並びにし、間隔を空ける
------------------------------------ */
.demo-wrap .actions{
  margin-top:18px;     /* 上に18px余白を付ける */
  display:flex;        /* 横並び配置 */
  gap:10px;            /* ボタン間に10pxの隙間 */
}
/* 送信ボタン */
.demo-wrap .actions .submit{
  padding:12px 18px;   /* 内側余白（上下12px 左右18px） */
  background:#2563eb;  /* 濃い青背景 */
  color:#fff;          /* 白文字 */
  border:none;         /* 枠線なし */
  border-radius:12px;  /* 角を丸く */
  cursor:pointer;      /* カーソルをポインタに */
}
/* 閉じるボタン */
.demo-wrap .actions .close{
  padding:12px 18px;   /* 内側余白（上下12px 左右18px） */
  background:#e2e8f0;  /* 薄いグレー背景 */
  color:#0f172a;       /* 黒文字 */
  border:none;         /* 枠線なし */
  border-radius:12px;  /* 角を丸く */
  cursor:pointer;      /* カーソルをポインタに */
}

/* ------------------------------------
   背景スクロール停止
   - body に .modal-lock が付与された時
   - overflow:hidden でスクロールを無効化
------------------------------------ */
body.modal-lock{ overflow:hidden; }

<!-- ▼お問い合わせフォーム付きモーダルのHTML（全文コメント付き） -->

<div class="demo-wrap">

  <!-- モーダルを開くボタン -->
  <button class="open-btn" id="openForm">お問い合わせ</button>

  <!-- オーバーレイ背景（閉じる対象にもなる） -->
  <div class="overlay" id="formModal" aria-hidden="true">
    <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="formTitle">
      <h3 id="formTitle">お問い合わせフォーム</h3>

      <!-- ▼送信先は form の action に設定します -->
      <form action="<!-- ここに送信先URLを入力してください -->" method="post">

        <div class="field">
          <label for="name">お名前</label>
          <input type="text" id="name" name="name" required>
        </div>

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

        <div class="field">
          <label for="msg">お問い合わせ内容</label>
          <textarea id="msg" name="message" rows="6"></textarea>
        </div>

        <div class="actions">
          <button type="submit" class="submit">送信</button>
          <button type="button" class="close" id="closeForm">閉じる</button>
        </div>
      </form>
    </div>
  </div>

</div>

// ▼お問い合わせフォーム付きモーダルのJS（全文コメント付き）

(function(){
  // -------------------------------------------------
  // 要素の取得
  // -------------------------------------------------
  const openBtn = document.getElementById('openForm');   // 「お問い合わせ」ボタン（クリックでモーダルを開く）
  const closeBtn = document.getElementById('closeForm'); // 「閉じる」ボタン（クリックでモーダルを閉じる）
  const modal   = document.getElementById('formModal');  // モーダル全体（オーバーレイを含む）
  const form    = modal.querySelector('form');           // モーダル内のフォーム要素

  // -------------------------------------------------
  // モーダルを開く関数
  // -------------------------------------------------
  function openModal(){
    modal.classList.add('active');             // .active を付与 → CSSで表示される
    modal.setAttribute('aria-hidden','false'); // アクセシビリティ属性を更新（表示状態）
    document.body.classList.add('modal-lock'); // 背景スクロールを停止するため body にクラス付与
  }

  // -------------------------------------------------
  // モーダルを閉じる関数
  // -------------------------------------------------
  function closeModal(){
    modal.classList.remove('active');           // .active を削除 → CSSで非表示になる
    modal.setAttribute('aria-hidden','true');   // アクセシビリティ属性を更新（非表示状態）
    document.body.classList.remove('modal-lock'); // 背景スクロールを再開
  }

  // -------------------------------------------------
  // イベントの割り当て
  // -------------------------------------------------
  openBtn.addEventListener('click', openModal);   // 開くボタンが押されたらモーダルを開く
  closeBtn.addEventListener('click', closeModal); // 閉じるボタンが押されたらモーダルを閉じる

  // オーバーレイ（黒い背景部分）をクリックしたら閉じる
  modal.addEventListener('click', e => {
    if(e.target === modal){ closeModal(); } // クリック対象がモーダル本体（＝背景部分）なら閉じる
  });

  // キーボード操作（Escキーが押されたら閉じる）
  window.addEventListener('keydown', e => {
    if(e.key === 'Escape'){ closeModal(); }
  });

  // -------------------------------------------------
  // 送信時の挙動（デモ用）
  // -------------------------------------------------
  // - デモでは e.preventDefault() により通常のフォーム送信を止めています。
  // - その結果、ページ遷移せず「モーダルを閉じてフォーム内容をリセット」するだけの動作になります。
  //
  // ★ 実際に action に指定した送信先へデータを送りたい場合：
  //   → e.preventDefault() を削除してください。
  //   → そうすると通常のフォーム送信（POST）が実行されます。
  //
  // ★ Ajax（fetchなど）で送信したい場合：
  //   → e.preventDefault() を残したまま、下に fetch() 処理を追記してください。
  //
  // 例：Ajax送信サンプル
  // form.addEventListener('submit', e=>{
  //   e.preventDefault(); // ページ遷移を止める（Ajax送信用）
  //   fetch(form.action, { method:'POST', body:new FormData(form) })
  //     .then(()=>{
  //       closeModal(); // 成功したらモーダルを閉じる
  //       form.reset(); // 入力をクリア
  //     })
  //     .catch(()=>{
  //       alert('送信に失敗しました'); // エラー処理
  //     });
  // });
  //
  // -------------------------------------------------
  form.addEventListener('submit', e=>{
    e.preventDefault();   // ★ デモ用：送信を止める（サーバーへは送信されない）
    closeModal();         // モーダルを閉じる
    form.reset();         // 入力内容をクリア（リセット）
  });
})();