長いフォームを怖くしない ─ 入力が揃ったら次のブロックがスッと出る「ステップ表示」の作り方

<form id="stepForm" class="step-form" novalidate>
  <!-- ステップ表示 -->
  <div class="step-indicator">
    <span class="step-current">1</span> / <span class="step-total">3</span>
  </div>

  <!-- 塊1: 基本情報 -->
  <div class="form-block is-visible" data-step="1">
    <h3>基本情報</h3>
    <label>
      お名前 <span class="required">*</span>
      <input type="text" name="name" required>
    </label>
    <label>
      メールアドレス <span class="required">*</span>
      <input type="email" name="email" required>
    </label>
  </div>

  <!-- 塊2: 詳細情報 -->
  <div class="form-block" data-step="2">
    <h3>ご要望について</h3>
    <label>
      会社名 <span class="required">*</span>
      <input type="text" name="company" required>
    </label>
    <label>
      お問い合わせ種別 <span class="required">*</span>
      <select name="type" required>
        <option value="">選択してください</option>
        <option value="estimate">お見積もり</option>
        <option value="consult">ご相談</option>
        <option value="other">その他</option>
      </select>
    </label>
  </div>

  <!-- 塊3: 送信 -->
  <div class="form-block" data-step="3">
    <h3>内容の確認</h3>
    <label>
      お問い合わせ内容 <span class="required">*</span>
      <textarea name="message" rows="4" required></textarea>
    </label>
    <button type="submit">送信する</button>
  </div>
</form>

/* フォーム全体 */
.step-form {
  max-width: 480px;
  margin: 0 auto;
  font-family: sans-serif;
}

/* ステップ表示 */
.step-indicator {
  text-align: right;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 16px;
}

/* 各塊: 最初は隠す */
.form-block {
  opacity: 0;
  transform: translateY(20px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms ease-out,
              transform 200ms ease-out,
              max-height 300ms ease-out;
  pointer-events: none;
}

/* 見える状態 */
.form-block.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 500px;
  pointer-events: auto;
  margin-bottom: 24px;
}

/* ラベルと入力欄 */
.form-block label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: #374151;
}

.form-block input,
.form-block select,
.form-block textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 必須マーク */
.required {
  color: #ef4444;
  font-size: 12px;
}

/* 送信ボタン */
.form-block button[type="submit"] {
  display: block;
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 150ms;
}

.form-block button[type="submit"]:hover {
  background: #1d4ed8;
}

/* アニメーション苦手な人への配慮 */
@media (prefers-reduced-motion: reduce) {
  .form-block {
    transition: opacity 50ms ease-out,
                max-height 50ms ease-out;
    transform: none;
  }
  .form-block.is-visible {
    transform: none;
  }
}

<pre class="wp-block-syntaxhighlighter-code">document.addEventListener('DOMContentLoaded', function() {
  var form = document.getElementById('stepForm');
  if (!form) return;

  var blocks = form.querySelectorAll('.form-block');
  var stepCurrent = form.querySelector('.step-current');

  // 各塊の必須項目を監視
  blocks.forEach(function(block, index) {
    var requiredFields = block.querySelectorAll('[required]');

    requiredFields.forEach(function(field) {
      // input, change で監視（selectにも対応）
      field.addEventListener('input', function() {
        checkBlock(block, index);
      });
      field.addEventListener('change', function() {
        checkBlock(block, index);
      });
    });
  });

  // 塊の入力状態をチェック
  function checkBlock(block, index) {
    var requiredFields = block.querySelectorAll('[required]');
    var allFilled = true;

    requiredFields.forEach(function(field) {
      if (!field.value.trim()) {
        allFilled = false;
      }
      // メールは@があるかだけ見る
      if (field.type === 'email' && field.value.trim()) {
        if (field.value.indexOf('@') === -1) {
          allFilled = false;
        }
      }
    });

    // 全部埋まったら次の塊を出す
    if (allFilled && index + 1 < blocks.length) {
      var nextBlock = blocks[index + 1];
      if (!nextBlock.classList.contains('is-visible')) {
        nextBlock.classList.add('is-visible');
        updateStepIndicator(index + 2);
      }
    }
  }

  // ステップ表示を更新
  function updateStepIndicator(step) {
    if (stepCurrent) {
      stepCurrent.textContent = step;
    }
  }
});</pre>