Forms & Interactive Inputs 5 Production-Ready Templates

Modern Form Inputs & UX Tutorials

Boost conversion and reduce user friction with modern animated floating labels, password reveal toggles with live strength scoring, 3D interactive flip credit cards, and multi-step progress forms.

Zero JS Floating Labels 3D Card Flip & Steppers 1-Click Code Copy

Quick Navigation

1. Floating Label Input→2. Password Strength Meter→3. 6-Digit OTP Box→4. 3D Flip Credit Card→5. Animated Step Wizard→

Pure CSS Animation

1. Floating Label Animated Input

Clean Material/iOS style floating label elevating smoothly on focus and text entry.

Email Address

<div class="floating-group">
  <input type="email" id="email" class="floating-input" placeholder=" " required>
  <label for="email" class="floating-label">Email Address</label>
</div>

.floating-group {
  position: relative;
  width: 100%;
  max-width: 320px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.floating-group * {
  box-sizing: border-box;
}

.floating-input {
  width: 100%;
  padding: 1.15rem 1rem 0.55rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.75rem;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

.floating-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: #64748b;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elevates label when focused or when input contains text */
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 25%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #d97706;
}

Security UX

2. Password Input with Reveal Eye & Strength Meter

Live password strength visualizer measuring length, numbers, and symbols in real-time.

Create Password

Enter password to check strength

<div class="password-box">
  <label class="input-label">Create Password</label>
  <div class="input-wrapper">
    <input type="password" id="userPass" placeholder="Enter password" class="pass-input" oninput="evalStrength(this.value)">
    <button type="button" id="togglePassBtn" class="toggle-eye" onclick="togglePassVisibility()">👁️</button>
  </div>
  <div class="strength-track">
    <div id="strengthBar" class="strength-fill"></div>
  </div>
  <span id="strengthText" class="strength-msg">Password strength indicator</span>
</div>

.password-box {
  width: 100%;
  max-width: 340px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.password-box * {
  box-sizing: border-box;
}

.input-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.input-wrapper {
  position: relative;
}

.pass-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pass-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.toggle-eye {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem;
}

.strength-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 9999px;
  margin-top: 0.65rem;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  width: 0;
  transition: all 0.3s ease;
}

.strength-msg {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 0.35rem;
}

function togglePassVisibility() {
  const input = document.getElementById('userPass');
  input.type = input.type === 'password' ? 'text' : 'password';
}

function evalStrength(password) {
  let score = 0;
  if (password.length >= 8) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;

  const bar = document.getElementById('strengthBar');
  const msg = document.getElementById('strengthText');

  if (!password) {
    bar.style.width = '0%';
    msg.innerText = 'Password strength indicator';
    msg.style.color = '#64748b';
  } else if (score <= 2) {
    bar.style.width = '33%';
    bar.style.background = '#ef4444';
    msg.innerText = 'Weak password';
    msg.style.color = '#ef4444';
  } else if (score === 3) {
    bar.style.width = '66%';
    bar.style.background = '#f59e0b';
    msg.innerText = 'Moderate strength';
    msg.style.color = '#f59e0b';
  } else {
    bar.style.width = '100%';
    bar.style.background = '#10b981';
    msg.innerText = 'Strong & secure password';
    msg.style.color = '#10b981';
  }
}

2FA & Auth Flow

3. 6-Digit OTP / PIN Verification Box

Smooth auto-advancing focus, backspace navigation, and full-clipboard paste support.

Enter 6-Digit Code (Try typing or pasting)

<div class="otp-container" id="otpBox">
  <input type="text" maxlength="1" class="otp-field" autofocus>
  <input type="text" maxlength="1" class="otp-field">
  <input type="text" maxlength="1" class="otp-field">
  <input type="text" maxlength="1" class="otp-field">
  <input type="text" maxlength="1" class="otp-field">
  <input type="text" maxlength="1" class="otp-field">
</div>

.otp-container {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.otp-container * {
  box-sizing: border-box;
}

.otp-field {
  width: 46px;
  height: 54px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: inherit;
  border: 2px solid #cbd5e1;
  border-radius: 0.75rem;
  outline: none;
  background: #ffffff;
  transition: all 0.2s ease;
}

.otp-field:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

const otpInputs = document.querySelectorAll('.otp-field');

otpInputs.forEach((input, index) => {
  input.addEventListener('input', (e) => {
    if (e.target.value.length === 1 && index < otpInputs.length - 1) {
      otpInputs[index + 1].focus();
    }
  });

  input.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !e.target.value && index > 0) {
      otpInputs[index - 1].focus();
    }
  });

  input.addEventListener('paste', (e) => {
    const pasteData = e.clipboardData.getData('text').trim();
    if (/^\d+$/.test(pasteData)) {
      pasteData.split('').forEach((char, i) => {
        if (otpInputs[i]) otpInputs[i].value = char;
      });
      if (otpInputs[pasteData.length - 1]) otpInputs[pasteData.length - 1].focus();
      e.preventDefault();
    }
  });
});

Interactive 3D Transform

4. 3D Flip Credit Card & Live Formatter

Realistic 3D payment card that flips automatically on CVV focus with dynamic number spacing.

VISA

•••• •••• •••• ••••

Card HolderYOUR NAME

ExpiresMM/YY

Security Code

•••

Encrypted 256-Bit SSL

<div class="payment-checkout-card">
  <!-- 3D Card Scene -->
  <div class="card-3d-scene">
    <div id="creditCard" class="card-3d-flipper">
      <!-- Front Face -->
      <div class="card-face card-front">
        <div class="card-header">
          <div class="card-chip"></div>
          <span class="card-brand">VISA</span>
        </div>
        <div id="dispCardNum" class="card-number">•••• •••• •••• ••••</div>
        <div class="card-footer">
          <div>
            <span class="card-label">Card Holder</span>
            <span id="dispCardName" class="card-value">YOUR NAME</span>
          </div>
          <div>
            <span class="card-label">Expires</span>
            <span id="dispCardExp" class="card-value">MM/YY</span>
          </div>
        </div>
      </div>

      <!-- Back Face -->
      <div class="card-face card-back">
        <div class="card-mag-strip"></div>
        <div class="card-cvv-box">
          <span class="cvv-label">Security Code</span>
          <div class="cvv-panel">
            <span id="dispCardCvv">•••</span>
          </div>
        </div>
        <div class="card-secure-text">Encrypted 256-Bit SSL</div>
      </div>
    </div>
  </div>

  <!-- Form Controls -->
  <form class="payment-form" onsubmit="return false;">
    <div class="form-group">
      <label for="cardNum" class="form-label">Card Number</label>
      <input type="text" id="cardNum" class="form-input" maxlength="19" placeholder="4532 0158 9632 7412" autocomplete="off">
    </div>
    <div class="form-row">
      <div class="form-group" style="flex: 2;">
        <label for="cardName" class="form-label">Cardholder Name</label>
        <input type="text" id="cardName" class="form-input" placeholder="John Doe" autocomplete="off">
      </div>
      <div class="form-group" style="flex: 1;">
        <label for="cardExp" class="form-label">Expires</label>
        <input type="text" id="cardExp" class="form-input" maxlength="5" placeholder="MM/YY" autocomplete="off">
      </div>
      <div class="form-group" style="flex: 1;">
        <label for="cardCvv" class="form-label">CVV</label>
        <input type="password" id="cardCvv" class="form-input" maxlength="4" placeholder="123" autocomplete="off">
      </div>
    </div>
  </form>
</div>

.payment-checkout-card {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: #090d16;
  border: 1px solid #1e293b;
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.payment-checkout-card * {
  box-sizing: border-box;
}

.card-3d-scene {
  width: 100%;
  max-width: 340px;
  height: 200px;
  perspective: 1000px;
  margin: 0 auto 2rem auto;
}

.card-3d-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 1.25rem;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.4);
}

.card-3d-flipper.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #1e1b4b, #312e81, #4c1d95);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.card-face.card-back {
  transform: rotateY(180deg);
  padding: 1.25rem 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-chip {
  width: 42px;
  height: 30px;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  border-radius: 6px;
  border: 1px solid #b45309;
}

.card-brand {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 1rem;
  color: #fde047;
  letter-spacing: 0.1em;
}

.card-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #ffffff;
}

.card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.card-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.card-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
}

.card-mag-strip {
  width: 100%;
  height: 38px;
  background: #090d16;
  margin-bottom: 1rem;
}

.card-cvv-box {
  padding: 0 1.5rem;
  margin-bottom: 0.5rem;
}

.cvv-label {
  display: block;
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: right;
}

.cvv-panel {
  background: #ffffff;
  color: #0f172a;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

.card-secure-text {
  font-size: 0.65rem;
  color: #94a3b8;
  text-align: right;
  padding: 0 1.5rem;
}

.payment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row {
  display: flex;
  gap: 0.75rem;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #1e293b;
  border: 1.5px solid #334155;
  border-radius: 0.75rem;
  color: #ffffff;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
}

.form-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  background: #0f172a;
}

const card = document.getElementById('creditCard');
const numInput = document.getElementById('cardNum');
const nameInput = document.getElementById('cardName');
const expInput = document.getElementById('cardExp');
const cvvInput = document.getElementById('cardCvv');

// Auto format card number with spaces (1234 5678 9012 3456)
numInput.addEventListener('input', (e) => {
  let val = e.target.value.replace(/\D/g, '');
  val = val.match(/.{1,4}/g)?.join(' ') || '';
  e.target.value = val;
  document.getElementById('dispCardNum').innerText = val || '•••• •••• •••• ••••';
});

nameInput.addEventListener('input', (e) => {
  document.getElementById('dispCardName').innerText = e.target.value.toUpperCase() || 'YOUR NAME';
});

expInput.addEventListener('input', (e) => {
  let val = e.target.value.replace(/\D/g, '');
  if (val.length >= 2) val = val.substring(0, 2) + '/' + val.substring(2, 4);
  e.target.value = val;
  document.getElementById('dispCardExp').innerText = val || 'MM/YY';
});

// Flip to back when focusing CVV, flip front when blur
cvvInput.addEventListener('focus', () => card.classList.add('is-flipped'));
cvvInput.addEventListener('blur', () => card.classList.remove('is-flipped'));
cvvInput.addEventListener('input', (e) => {
  document.getElementById('dispCardCvv').innerText = e.target.value || '•••';
});

Multi-Step UX

5. Animated Multi-Step Stepper Wizard

Multi-step form wizard with animated progress track and step transitions.

1. Account Credentials

Enter your primary work email address to create your profile.

Work Email

<div class="stepper-wizard-card">
  <!-- Progress Header -->
  <div class="stepper-track-wrap">
    <div class="track-line-bg"></div>
    <div id="stepTrackFill" class="track-line-fill"></div>
    <div id="step1" class="step-circle active">1</div>
    <div id="step2" class="step-circle">2</div>
    <div id="step3" class="step-circle">3</div>
  </div>

  <!-- Step Content Panels -->
  <div class="stepper-content-box">
    <div id="panel1" class="step-panel">
      <h4 class="step-title">1. Account Credentials</h4>
      <p class="step-desc">Enter your primary work email address.</p>
      <input type="email" class="stepper-input" placeholder="[email protected]">
    </div>

    <div id="panel2" class="step-panel hidden">
      <h4 class="step-title">2. Workspace Details</h4>
      <p class="step-desc">Choose your team subdomain.</p>
      <input type="text" class="stepper-input" placeholder="acme-team">
    </div>

    <div id="panel3" class="step-panel hidden text-center">
      <h4 class="step-title">3. Ready to Launch! 🎉</h4>
      <p class="step-desc">Your workspace is configured.</p>
    </div>

    <!-- Stepper Navigation Buttons -->
    <div class="stepper-footer">
      <button type="button" id="btnPrev" class="btn-step-prev" disabled>← Back</button>
      <button type="button" id="btnNext" class="btn-step-next">Continue →</button>
    </div>
  </div>
</div>

.stepper-wizard-card {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.stepper-wizard-card * {
  box-sizing: border-box;
}

.stepper-track-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 2rem;
}

.track-line-bg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #e2e8f0;
  transform: translateY(-50%);
  z-index: 1;
}

.track-line-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  background: #f59e0b;
  transform: translateY(-50%);
  transition: width 0.4s ease;
  z-index: 2;
  width: 0%;
}

.step-circle {
  position: relative;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #64748b;
  transition: all 0.3s ease;
}

.step-circle.active {
  border-color: #f59e0b;
  color: #f59e0b;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.2);
}

.step-circle.completed {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

.stepper-content-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}

.step-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.25rem 0;
}

.step-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 1.25rem 0;
  line-height: 1.4;
}

.stepper-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.75rem;
  color: #0f172a;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
}

.stepper-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.stepper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.btn-step-prev {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-step-prev:hover:not(:disabled) {
  background: #cbd5e1;
  color: #0f172a;
}

.btn-step-prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-step-next {
  padding: 0.6rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  background: #f59e0b;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: all 0.2s ease;
}

.btn-step-next:hover {
  background: #d97706;
  transform: translateY(-1px);
}

let currentStep = 1;
const totalSteps = 3;

function updateStepperUI() {
  const percent = ((currentStep - 1) / (totalSteps - 1)) * 100;
  document.getElementById('stepTrackFill').style.width = `${percent}%`;

  for (let i = 1; i <= totalSteps; i++) {
    const node = document.getElementById(`step${i}`);
    const panel = document.getElementById(`panel${i}`);
    
    if (i < currentStep) {
      node.className = 'step-circle completed';
      node.innerHTML = '✓';
    } else if (i === currentStep) {
      node.className = 'step-circle active';
      node.innerHTML = i;
    } else {
      node.className = 'step-circle';
      node.innerHTML = i;
    }

    if (panel) panel.classList.toggle('hidden', i !== currentStep);
  }

  document.getElementById('btnPrev').disabled = (currentStep === 1);
  document.getElementById('btnNext').innerText = (currentStep === totalSteps) ? 'Finish & Save 🎉' : 'Continue →';
}

document.getElementById('btnNext').addEventListener('click', () => {
  if (currentStep < totalSteps) {
    currentStep++;
    updateStepperUI();
  }
});

document.getElementById('btnPrev').addEventListener('click', () => {
  if (currentStep > 1) {
    currentStep--;
    updateStepperUI();
  }
});

Frequently Asked Questions

How do CSS floating labels work without JavaScript?

By placing the <input> before the <label> in the DOM and using the CSS sibling selector input:focus ~ label or input:not(:placeholder-shown) ~ label with placeholder=' ' (a single space), the label animates up when focused or populated.

Does the 6-digit OTP box handle pasting entire verification codes?

Yes! The Vanilla JavaScript paste event listener automatically detects pasted text, distributes each digit into its corresponding box, and focuses on the final input.

How is the password strength score calculated?

The live strength meter runs regex checks for minimum length (8+ chars), numbers, uppercase letters, and special symbols, calculating an instant visual percentage score.