Bootstrap OTP Login Form — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsotp-card">
    <div class="card-body p-4">

      <div id="bsotpStep1">
        <h5 class="fw-bold mb-1 text-center">Log in</h5>
        <p class="text-muted small mb-3 text-center">Enter your email or phone to receive a one-time code.</p>
        <label class="form-label small fw-semibold" for="bsotpContact">Email or phone</label>
        <input type="text" class="form-control mb-3" id="bsotpContact" placeholder="[email protected]">
        <div class="small text-danger mb-2 d-none" id="bsotpContactError">Enter a valid email or phone number.</div>
        <button class="btn btn-dark w-100 fw-bold" id="bsotpSendBtn">Send code</button>
      </div>

      <div id="bsotpStep2" class="d-none">
        <h5 class="fw-bold mb-1 text-center">Enter the code</h5>
        <p class="text-muted small mb-3 text-center">We sent a 6-digit code to <span id="bsotpTarget" class="fw-semibold"></span>.</p>
        <div class="d-flex gap-2 justify-content-center mb-3" id="bsotpDigits">
          <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bsotp-box">
          <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bsotp-box">
          <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bsotp-box">
          <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bsotp-box">
          <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bsotp-box">
          <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bsotp-box">
        </div>
        <p class="small text-center mb-3" id="bsotpStatus">&nbsp;</p>
        <button class="btn btn-dark w-100 fw-bold mb-2" id="bsotpVerifyBtn" disabled>Verify &amp; log in</button>
        <p class="small text-muted text-center mb-0">
          <a href="javascript:void(0)" id="bsotpBack">&larr; Change contact</a>
          &nbsp;&middot;&nbsp;
          <a href="javascript:void(0)" id="bsotpResend">Resend code</a>
          <span id="bsotpTimer" class="text-muted"></span>
        </p>
      </div>

    </div>
  </div>
</div>

.bsotp-card { width: 400px; border: 1px solid #eceef1; border-radius: 14px; }
.bsotp-box { width: 44px; height: 52px; font-size: 20px; font-weight: 700; padding: 0; }
#bsotpStep2 { animation: bsotpFadeIn .25s ease; }
@keyframes bsotpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

const CORRECT_CODE = '135790';
const RESEND_SECONDS = 30;

const step1 = document.getElementById('bsotpStep1');
const step2 = document.getElementById('bsotpStep2');
const contactInput = document.getElementById('bsotpContact');
const contactError = document.getElementById('bsotpContactError');
const sendBtn = document.getElementById('bsotpSendBtn');
const targetLabel = document.getElementById('bsotpTarget');
const boxes = Array.from(document.querySelectorAll('.bsotp-box'));
const verifyBtn = document.getElementById('bsotpVerifyBtn');
const status = document.getElementById('bsotpStatus');
const backLink = document.getElementById('bsotpBack');
const resendLink = document.getElementById('bsotpResend');
const timerLabel = document.getElementById('bsotpTimer');

let countdownId = null;

function isValidContact(value) {
  const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const phone = /^[0-9+()\-\s]{7,}$/;
  return email.test(value) || phone.test(value);
}

function currentCode() {
  return boxes.map(b => b.value).join('');
}

function checkComplete() {
  verifyBtn.disabled = currentCode().length !== 6;
}

function startCountdown() {
  let remaining = RESEND_SECONDS;
  resendLink.classList.add('disabled', 'text-muted');
  resendLink.style.pointerEvents = 'none';
  timerLabel.textContent = ' (' + remaining + 's)';
  clearInterval(countdownId);
  countdownId = setInterval(() => {
    remaining -= 1;
    if (remaining <= 0) {
      clearInterval(countdownId);
      timerLabel.textContent = '';
      resendLink.classList.remove('disabled', 'text-muted');
      resendLink.style.pointerEvents = 'auto';
    } else {
      timerLabel.textContent = ' (' + remaining + 's)';
    }
  }, 1000);
}

// Revealing step 2 is a swap, not a navigation: step 1 is hidden and step 2's
// d-none is removed, which also re-triggers the CSS fade-in animation.
function revealStep2() {
  targetLabel.textContent = contactInput.value.trim();
  step1.classList.add('d-none');
  step2.classList.remove('d-none');
  boxes.forEach(b => { b.value = ''; b.classList.remove('is-invalid'); });
  checkComplete();
  boxes[0].focus();
  status.textContent = '\u00a0';
  status.className = 'small text-center mb-3';
  startCountdown();
}

sendBtn.addEventListener('click', () => {
  const value = contactInput.value.trim();
  const valid = isValidContact(value);
  contactInput.classList.toggle('is-invalid', !valid);
  contactError.classList.toggle('d-none', valid);
  if (valid) revealStep2();
});

boxes.forEach((box, i) => {
  box.addEventListener('input', () => {
    box.value = box.value.replace(/[^0-9]/g, '').slice(0, 1);
    if (box.value && i < boxes.length - 1) boxes[i + 1].focus();
    checkComplete();
  });
  box.addEventListener('keydown', e => {
    if (e.key === 'Backspace' && !box.value && i > 0) boxes[i - 1].focus();
  });
  box.addEventListener('paste', e => {
    const text = (e.clipboardData || window.clipboardData).getData('text').replace(/[^0-9]/g, '');
    if (text.length < 2) return;
    e.preventDefault();
    text.slice(0, 6).split('').forEach((ch, idx) => { if (boxes[idx]) boxes[idx].value = ch; });
    checkComplete();
    boxes[Math.min(text.length, 6) - 1].focus();
  });
});

verifyBtn.addEventListener('click', () => {
  const ok = currentCode() === CORRECT_CODE;
  status.textContent = ok ? 'Logged in successfully.' : 'Incorrect code — try again.';
  status.className = 'small text-center mb-3 ' + (ok ? 'text-success' : 'text-danger');
  boxes.forEach(b => b.classList.toggle('is-invalid', !ok));
});

backLink.addEventListener('click', () => {
  clearInterval(countdownId);
  step2.classList.add('d-none');
  step1.classList.remove('d-none');
});

resendLink.addEventListener('click', () => {
  if (resendLink.classList.contains('disabled')) return;
  boxes.forEach(b => { b.value = ''; b.classList.remove('is-invalid'); });
  boxes[0].focus();
  checkComplete();
  status.textContent = 'A new code was sent.';
  status.className = 'small text-center mb-3 text-muted';
  startCountdown();
});