会員登録フォーム付きモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

会員登録フォーム付きモーダルウインドウの作り方

会員登録フォーム付きモーダルウインドウを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、「会員登録フォームを表示」ボタンをクリックすると、画面中央に会員登録フォームを表示する仕組みを作成します。フォームにはお名前・メールアドレス・パスワード・パスワード（確認）の4項目を用意しており、通常は非表示にしておき、必要なときだけモーダルウインドウで表示できる構成にしています。

会員制サイトやWebサービス、オンラインショップなど、ページを移動せずに新規会員登録フォームを表示したい場面に適しています。4項目すべてを必須入力とし、メールアドレスには形式チェックを設定しています。また、パスワードと確認用パスワードが一致しているかをJavaScriptで確認し、一致しない場合はエラーメッセージを表示します。入力内容に問題がなければ次の処理へ進める仕組みで、登録時の入力間違いを防ぐために役立ちます。

モーダルウインドウには「閉じる」と「会員登録」の2つのボタンを配置し、「閉じる」をクリックするとフォームを非表示にして入力内容を初期状態へ戻します。HTMLのaction属性とmethod=”post”を使用することで、利用者が用意した会員登録処理のURLへ入力内容をPOST送信できます。実際のアカウント作成やパスワードの安全な保存、本人確認などは送信先のシステムで処理する必要があります。また、CSSではモーダルの横幅や余白、背景色、角丸、入力欄、ボタンのデザインなどを自由に調整でき、スマートフォン・タブレット・PCでも使いやすいレスポンシブ対応のフォームとして活用できます。

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

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

デモ

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

<!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>

  <!-- モーダルを開くボタン -->
  <button class="signup-modal-window_open" id="signup-modal-window-open" type="button">
    会員登録フォームを表示
  </button>

  <!-- 会員登録モーダル本体 -->
  <div class="signup-modal-window_modal" id="signup-modal-window-modal" role="dialog" aria-modal="true" aria-labelledby="signup-modal-window-title" aria-hidden="true">

    <!-- モーダルタイトル -->
    <div class="signup-modal-window_modal-title" id="signup-modal-window-title">
      会員登録
    </div>

    <!-- モーダル説明文 -->
    <p class="signup-modal-window_modal-text">
      以下の項目を入力して会員登録を行ってください。
    </p>

    <!--
      会員登録フォームの送信先設定

      1. HTTPSに対応した会員登録処理を用意してください。
         例：PHPなどで作成した登録処理や、既存の会員管理システム。

      2. action="YOUR_SIGNUP_URL" のYOUR_SIGNUP_URLを、
         実際の会員登録処理URLへ置き換えてください。

      3. method="post"はそのまま使用してください。

      4. 送信される項目は次の4つです。
         name             ：お名前
         email            ：メールアドレス
         password         ：パスワード
         confirm_password ：パスワード（確認）

      5. 受信側で異なる項目名を使用している場合は、
         input要素のname属性を受信側の仕様に合わせてください。

      このサンプルにアカウント作成処理は含まれていません。
      メールアドレスの重複確認、パスワードの安全な保存、
      サーバー側の入力検証、CSRF対策、本人確認などは
      受信側のシステムで実装してください。

      実際の運用ではHTTPSを使用し、必要な認証トークンや
      セキュリティ対策も受信側の仕様に合わせて設定してください。
    -->

    <!-- 会員登録フォーム -->
    <form class="signup-modal-window_form" id="signup-modal-window-form" action="YOUR_SIGNUP_URL" method="post">

      <!-- お名前入力欄 -->
      <div class="signup-modal-window_field">

        <!-- お名前ラベルと必須表示 -->
        <label class="signup-modal-window_label" for="signup-modal-window-name">
          お名前
          <span class="signup-modal-window_required">必須</span>
        </label>

        <!--
          お名前を入力するテキストフィールド
          name="name"で送信します。
          autocomplete="name"で氏名の自動入力を補助します。
          requiredで未入力を防止します。
        -->
        <input
          class="signup-modal-window_input"
          id="signup-modal-window-name"
          name="name"
          type="text"
          autocomplete="name"
          placeholder="山田 太郎"
          required>

      </div>

      <!-- メールアドレス入力欄 -->
      <div class="signup-modal-window_field">

        <!-- メールアドレスラベルと必須表示 -->
        <label class="signup-modal-window_label" for="signup-modal-window-email">
          メールアドレス
          <span class="signup-modal-window_required">必須</span>
        </label>

        <!--
          メールアドレスを入力するテキストフィールド
          name="email"で送信します。
          type="email"でメールアドレスの形式をチェックします。
          autocomplete="email"でメールアドレスの自動入力を補助します。
          requiredで未入力を防止します。
        -->
        <input
          class="signup-modal-window_input"
          id="signup-modal-window-email"
          name="email"
          type="email"
          autocomplete="email"
          placeholder="sample@example.com"
          required>

      </div>

      <!-- パスワード入力欄 -->
      <div class="signup-modal-window_field">

        <!-- パスワードラベルと必須表示 -->
        <label class="signup-modal-window_label" for="signup-modal-window-password">
          パスワード
          <span class="signup-modal-window_required">必須</span>
        </label>

        <!--
          パスワードを入力するフィールド
          name="password"で送信します。
          type="password"で入力文字を隠します。
          autocomplete="new-password"で新規登録用の入力を補助します。
          requiredで未入力を防止します。
        -->
        <input
          class="signup-modal-window_input"
          id="signup-modal-window-password"
          name="password"
          type="text"
          autocomplete="off"
          placeholder="パスワードを入力してください"
          required>

      </div>

      <!-- パスワード確認入力欄 -->
      <div class="signup-modal-window_field">

        <!-- パスワード確認ラベルと必須表示 -->
        <label class="signup-modal-window_label" for="signup-modal-window-confirm">
          パスワード（確認）
          <span class="signup-modal-window_required">必須</span>
        </label>

        <!--
          確認用パスワードを入力するフィールド
          name="confirm_password"で送信します。
          type="password"で入力文字を隠します。
          requiredで未入力を防止します。
          JavaScriptで最初のパスワードとの一致を確認します。
        -->
        <input
          class="signup-modal-window_input"
          id="signup-modal-window-confirm"
          name="confirm_password"
          type="text"
          autocomplete="off"
          placeholder="パスワードをもう一度入力してください"
          required>

      </div>

      <!-- パスワード不一致のエラーメッセージ -->
      <p class="signup-modal-window_error" id="signup-modal-window-error" role="alert">
        パスワードが一致していません。
      </p>

      <!-- 操作ボタン -->
      <div class="signup-modal-window_actions">

        <!-- モーダルを閉じるボタン -->
        <button class="signup-modal-window_close" id="signup-modal-window-close" type="button">
          閉じる
        </button>

        <!-- 指定した会員登録処理へPOST送信するボタン -->
        <button class="signup-modal-window_submit" type="submit">
          会員登録
        </button>

      </div>

    </form>

  </div>

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

</body>

</html>

/* =========================================
   モーダルを開くボタン
========================================= */

/* 会員登録フォームを表示するボタン */
.signup-modal-window_open{
  padding:12px 24px; /* 上下12px・左右24px。値を大きくするとボタンが大きくなる */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}


/* =========================================
   モーダルウインドウ
========================================= */

/* モーダル本体 */
.signup-modal-window_modal{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面を基準に固定 */
  top:50%; /* モーダルの上端を画面の縦方向中央へ配置 */
  left:50%; /* モーダルの左端を画面の横方向中央へ配置 */
  z-index:9999; /* 表示順。値を大きくすると前面に配置されやすくなる */
  width:calc(100% - 40px); /* 画面幅から40pxを引いて左右の余白を確保 */
  max-width:460px; /* 最大横幅。値を大きくするとモーダルが横に広がる */
  max-height:calc(100vh - 40px); /* 画面の高さから40pxを引いた範囲に収める */
  overflow-y:auto; /* 内容が収まらない場合は縦スクロール */
  padding:28px; /* 内側余白。値を大きくすると内容と外周の間隔が広がる */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 40px rgba(0,0,0,.2); /* 下方向20px・ぼかし40pxの影 */
  font-family:sans-serif; /* モーダル内のフォント */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
  transform:translate(-50%,-50%); /* 自身の横幅と高さの半分を戻して中央配置 */
}

/* モーダル表示状態 */
.signup-modal-window_modal.is-active{
  display:block; /* モーダル本体を表示 */
}

/* モーダルタイトル */
.signup-modal-window_modal-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* モーダル説明文 */
.signup-modal-window_modal-text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとフォームとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:14px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}


/* =========================================
   会員登録フォーム
========================================= */

/* フォーム全体 */
.signup-modal-window_form{
  display:grid; /* 入力項目を縦方向に配置 */
  gap:18px; /* 入力項目同士の間隔。値を大きくすると間隔が広がる */
  text-align:left; /* フォーム内の文字を左揃えにする */
}

/* 入力項目 */
.signup-modal-window_field{
  display:grid; /* ラベルと入力欄を縦方向に配置 */
  gap:8px; /* ラベルと入力欄の間隔。値を大きくすると間隔が広がる */
}

/* 入力項目のラベル */
.signup-modal-window_label{
  color:#1f2937; /* ラベルの文字色 */
  font-size:15px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
}

/* 必須表示 */
.signup-modal-window_required{
  margin-left:6px; /* ラベルと必須表示の間隔。値を大きくすると間隔が広がる */
  color:#dc2626; /* 必須表示の文字色 */
  font-size:13px; /* 必須表示の文字サイズ */
}

/* 入力欄 */
.signup-modal-window_input{
  width:100%; /* 入力欄の横幅を親要素に合わせる */
  padding:12px 14px; /* 上下12px・左右14px。値を大きくすると内側余白が広がる */
  border:1px solid #cbd5e1; /* 入力欄の枠線。1pxが太さ、solidが種類 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  font:inherit; /* 親要素のフォントを継承 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* プレースホルダー */
.signup-modal-window_input::placeholder{
  color:#9ca3af; /* 未入力時に表示する入力例の文字色 */
}

/* 入力欄のフォーカス状態 */
.signup-modal-window_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,.15); /* 3pxの強調枠。値を大きくすると外側へ広がる */
}

/* 入力エラーメッセージ */
.signup-modal-window_error{
  display:none; /* 初期状態では非表示 */
  margin:0; /* 外側余白をなくす */
  color:#dc2626; /* エラーメッセージの文字色 */
  font-size:13px; /* エラーメッセージの文字サイズ */
  line-height:1.6; /* エラーメッセージの行間 */
}

/* 入力エラー表示状態 */
.signup-modal-window_error.is-active{
  display:block; /* エラーメッセージを表示 */
}


/* =========================================
   操作ボタン
========================================= */

/* 操作ボタンの配置 */
.signup-modal-window_actions{
  display:flex; /* 閉じるボタンと会員登録ボタンを横並びにする */
  justify-content:flex-end; /* ボタンを右側に配置 */
  gap:14px; /* ボタン同士の間隔。値を大きくすると間隔が広がる */
  margin-top:8px; /* 上側8pxの余白。値を大きくすると入力欄との間隔が広がる */
}

/* 閉じるボタン・会員登録ボタン共通 */
.signup-modal-window_close,
.signup-modal-window_submit{
  flex:1; /* 2つのボタンで横幅を均等に分ける */
  min-width:0; /* 狭い画面でもボタンを縮小できるようにする */
  padding:13px 18px; /* 上下13px・左右18px。値を大きくするとボタンが大きくなる */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* 閉じるボタン */
.signup-modal-window_close{
  background:#111827; /* 閉じるボタンの背景色 */
}

/* 会員登録ボタン */
.signup-modal-window_submit{
  background:#2563eb; /* 会員登録ボタンの背景色 */
}


/* =========================================
   レスポンシブ対応
========================================= */

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

  /* モーダル本体 */
  .signup-modal-window_modal{
    padding:24px 18px; /* 上下24px・左右18px。スマートフォンでは余白を小さくする */
  }

  /* 操作ボタン */
  .signup-modal-window_actions{
    gap:10px; /* ボタン同士の間隔を10pxにする */
  }

  /* 閉じるボタン・会員登録ボタン */
  .signup-modal-window_close,
  .signup-modal-window_submit{
    padding:13px 12px; /* 上下13px・左右12px。狭い画面に合わせて余白を調整 */
  }

}

// =========================================
// 会員登録フォームとモーダルの取得
// =========================================

// モーダルを開くボタンを取得
const signupModalWindowOpen =
  document.getElementById("signup-modal-window-open");

// モーダル本体を取得
const signupModalWindowModal =
  document.getElementById("signup-modal-window-modal");

// モーダルを閉じるボタンを取得
const signupModalWindowClose =
  document.getElementById("signup-modal-window-close");

// 会員登録フォームを取得
const signupModalWindowForm =
  document.getElementById("signup-modal-window-form");

// パスワード入力欄を取得
const signupModalWindowPassword =
  document.getElementById("signup-modal-window-password");

// パスワード確認欄を取得
const signupModalWindowConfirm =
  document.getElementById("signup-modal-window-confirm");

// パスワード不一致のエラーメッセージを取得
const signupModalWindowError =
  document.getElementById("signup-modal-window-error");


// =========================================
// モーダルを開く
// =========================================

// 会員登録フォームを表示するボタンをクリックしたとき
signupModalWindowOpen.addEventListener("click", () => {

  // モーダルを表示
  signupModalWindowModal.classList.add("is-active");

  // アクセシビリティ用の非表示状態を解除
  signupModalWindowModal.setAttribute("aria-hidden", "false");

});


// =========================================
// モーダルを閉じる
// =========================================

// 閉じるボタンをクリックしたとき
signupModalWindowClose.addEventListener("click", () => {

  // モーダルを非表示
  signupModalWindowModal.classList.remove("is-active");

  // アクセシビリティ用の非表示状態を設定
  signupModalWindowModal.setAttribute("aria-hidden", "true");

  // フォームの入力内容を初期状態に戻す
  signupModalWindowForm.reset();

  // パスワード欄を空欄にする
  signupModalWindowPassword.value="";

  // パスワード確認欄を空欄にする
  signupModalWindowConfirm.value="";

  // ブラウザの入力エラーを解除
  signupModalWindowConfirm.setCustomValidity("");

  // パスワード不一致のエラーメッセージを非表示
  signupModalWindowError.classList.remove("is-active");

});


// =========================================
// パスワードの一致チェック
// =========================================

// 会員登録フォームを送信するとき
signupModalWindowForm.addEventListener("submit", (event) => {

  // 前回のエラー表示を解除
  signupModalWindowError.classList.remove("is-active");

  // パスワードと確認用パスワードを比較
  if(signupModalWindowPassword.value!==signupModalWindowConfirm.value){

    // POST送信を停止
    event.preventDefault();

    // パスワード不一致のメッセージを表示
    signupModalWindowError.classList.add("is-active");

    // ブラウザの入力エラーを設定
    signupModalWindowConfirm.setCustomValidity("パスワードが一致していません。");

    // エラー内容を表示
    signupModalWindowConfirm.reportValidity();

    return;

  }

  // パスワードが一致していれば入力エラーを解除
  signupModalWindowConfirm.setCustomValidity("");

  // 一致した場合はPOST送信を停止しない
  // action属性に指定した会員登録処理URLへ送信される

});


// =========================================
// 入力内容が変更されたとき
// =========================================

// パスワードを変更したとき
signupModalWindowPassword.addEventListener("input", () => {

  // 確認欄に設定された入力エラーを解除
  signupModalWindowConfirm.setCustomValidity("");

  // パスワード不一致のエラーメッセージを非表示
  signupModalWindowError.classList.remove("is-active");

});

// 確認用パスワードを変更したとき
signupModalWindowConfirm.addEventListener("input", () => {

  // 入力エラーを解除
  signupModalWindowConfirm.setCustomValidity("");

  // パスワード不一致のエラーメッセージを非表示
  signupModalWindowError.classList.remove("is-active");

});

// フォームの必須入力・メールアドレス形式はHTMLでチェックします。
// パスワードが一致した場合のみ、指定URLへPOST送信します。
// アカウント作成・パスワード保存・本人確認は受信側で行ってください。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは会員登録フォームを開くボタンと、お名前・メールアドレス・パスワード・パスワード（確認）の4項目を備えたモーダルウインドウを作成します。CSSではモーダルの表示位置やフォームのデザインを設定し、JavaScriptではモーダルの開閉、入力内容のリセット、パスワードの一致チェックを制御します。オーバーレイは使用せず、モーダル本体だけを画面中央に表示する構成です。実際の会員登録には、利用者自身でPOST送信に対応した登録システムを用意する必要があります。

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

各ファイルの役割
index.htmlは、会員登録フォームを開くボタンとモーダルウインドウを構成するファイルです。お名前・メールアドレス・パスワード・パスワード（確認）の4項目を用意し、すべてに必須入力を設定しています。メールアドレスには形式チェックを設定し、フォームのaction属性でPOST送信先のURLを指定できます。

style.cssは、モーダルウインドウと会員登録フォームのデザインを設定するファイルです。モーダルの最大横幅、内側余白、背景色、角丸、影、入力欄の枠線、必須表示、エラーメッセージ、ボタンの色や配置などを変更できます。

script.jsは、モーダルウインドウの開閉とパスワードの一致チェックを制御するファイルです。「会員登録フォームを表示」をクリックするとモーダルを表示し、「閉じる」をクリックすると非表示にして入力内容をリセットします。また、会員登録時にパスワードと確認用パスワードを比較し、一致しない場合はエラーメッセージを表示して送信を停止します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置してください。3ファイルを同じ階層に保存すると、index.htmlからCSSとJavaScriptが読み込まれます。

index.htmlをブラウザで開き、「会員登録フォームを表示」をクリックすると、画面中央に会員登録フォームが表示されます。お名前・メールアドレス・パスワード・パスワード（確認）の4項目を入力してください。

4項目すべてが必須入力です。未入力の項目がある場合やメールアドレスの形式が正しくない場合は、ブラウザの標準機能によって送信が制限されます。また、パスワードと確認用パスワードが一致しない場合は、JavaScriptによってエラーメッセージが表示され、送信が停止します。

入力内容に問題がない状態で「会員登録」をクリックすると、フォームに設定したURLへPOST送信します。「閉じる」をクリックするとモーダルが閉じ、入力内容とエラーメッセージが初期状態へ戻ります。

配布用コードでは、お名前・メールアドレス・パスワードの自動入力を補助するautocomplete属性を設定しています。ブラウザによっては保存済みの情報が入力される場合があります。

POST送信先の設定
実際に会員登録機能として使用するには、HTTPSに対応した会員登録処理を利用者自身で用意してください。PHPなどで作成した登録処理や、既存の会員管理システムを利用できます。

index.html内のaction="YOUR_SIGNUP_URL"を探し、YOUR_SIGNUP_URLを実際の会員登録処理URLへ置き換えてください。method="post"は変更せずに使用します。

送信される項目は、name（お名前）、email（メールアドレス）、password（パスワード）、confirm_password（パスワード確認）の4つです。受信側のシステムでは、これらの項目を受け取れるようにしてください。受信側で異なる項目名を使用している場合は、HTMLのname属性を受信側の仕様に合わせて変更します。

送信先URLを設定したら、テスト用の登録情報を使用して送信を確認してください。パスワードが一致しない場合には送信されないこと、一致した場合には受信側で正しく処理されることを確認します。

このサンプルには、実際のアカウント作成、メールアドレスの重複確認、パスワードの保存、本人確認、登録完了画面などは含まれていません。サーバー側での入力検証、CSRF対策、パスワードの安全なハッシュ化、迷惑登録対策なども、利用者自身が用意する登録システムで実装してください。ブラウザ側の入力チェックだけでは、登録システムの安全性は保証されません。

カスタマイズできる内容
index.htmlでは、モーダルを開くボタンの文字、モーダルタイトル、説明文、各入力項目のラベル、プレースホルダー、閉じるボタンや会員登録ボタンの文字などを変更できます。

パスワードと確認用パスワードにはtype="password"を設定しており、入力文字が伏せられる構成です。実際の会員登録フォームでは、パスワードが画面上にそのまま表示されないよう、この設定を維持してください。

入力項目を追加する場合は、HTMLの入力欄とname属性を設定し、必要に応じてJavaScriptの入力チェックを追加します。また、追加した項目を受信できるよう、会員登録システム側も対応させる必要があります。

style.cssでは、モーダルの横幅、表示位置、内側余白、角丸、背景色、影、入力欄のサイズ、枠線、エラーメッセージの文字色、操作ボタンの色や間隔などを変更できます。

script.jsでは、モーダルの開閉処理やパスワードの一致チェックをカスタマイズできます。パスワードが一致しない場合は送信を停止し、一致した場合はHTMLのPOST送信を実行する構成です。

数値調整
style.css

padding:12px 24px;
モーダルを開くボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。

border-radius:8px;
ボタンや入力欄の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。

top:50%;
モーダルの縦方向の表示位置です。50%を基準に画面中央へ配置します。値を小さくすると上方向、大きくすると下方向へ移動します。

left:50%;
モーダルの横方向の表示位置です。50%を基準に画面中央へ配置します。値を小さくすると左方向、大きくすると右方向へ移動します。

width:calc(100% - 40px);
モーダルの横幅です。画面幅から40pxを引き、左右に余白を確保します。40pxを大きくすると画面端との間隔が広がります。

max-width:460px;
モーダルの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

max-height:calc(100vh - 40px);
モーダルの最大高さです。画面の高さから40pxを引いた範囲に収めます。内容が収まらない場合はモーダル内で縦スクロールできます。

padding:28px;
モーダルの内側余白です。値を大きくすると内容と外周の間隔が広がります。

border-radius:18px;
モーダルの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルの影です。20pxは影の上下位置、40pxはぼかし範囲を表します。最後の.2は影の透明度で、値を大きくすると影が濃くなります。

margin:0 0 12px;
モーダルタイトルの下側余白です。12pxを大きくすると説明文との間隔が広がります。

font-size:22px;
モーダルタイトルの文字サイズです。値を大きくすると文字が大きくなります。

margin:0 0 28px;
モーダル説明文の下側余白です。28pxを大きくすると入力フォームとの間隔が広がります。

gap:18px;
会員登録フォーム内の入力項目同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

gap:8px;
ラベルと入力欄の間隔です。値を大きくすると間隔が広がります。

margin-left:6px;
ラベルと赤色の「必須」表示の間隔です。値を大きくすると間隔が広がります。

padding:12px 14px;
入力欄の内側余白です。上下の12pxを大きくすると入力欄が高くなり、左右の14pxを大きくすると文字と枠線の間隔が広がります。

border:1px solid #cbd5e1;
入力欄の枠線です。1pxは太さ、solidは実線、#cbd5e1は色を表します。

outline:3px solid rgba(37,99,235,.15);
入力欄にフォーカスしたときの強調枠です。3pxを大きくすると枠が太くなり、小さくすると細くなります。

gap:14px;
閉じるボタンと会員登録ボタンの間隔です。値を大きくすると間隔が広がります。

margin-top:8px;
操作ボタンエリアの上側余白です。値を大きくすると入力欄との間隔が広がります。

padding:13px 18px;
閉じるボタンと会員登録ボタンの内側余白です。上下の13pxを大きくするとボタンが高くなり、左右の18pxを大きくすると横に広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。モーダルにはwidth:calc(100% - 40px);とmax-width:460px;を設定しており、画面幅が狭い場合は自動的に縮小します。また、max-height:calc(100vh - 40px);とoverflow-y:auto;によって、画面の高さに内容が収まらない場合はモーダル内で縦スクロールできます。

画面幅640px以下では、モーダルの内側余白をpadding:24px 18px;へ変更します。さらに、閉じるボタンと会員登録ボタンの間隔を10pxに縮小し、ボタンの左右余白を12pxへ調整します。2つのボタンは均等な横幅で表示され、スマートフォン・タブレット・PCでも使いやすい構成です。