Interactive OTP Form | HTML, CSS & JavaScript

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

/* 🌌 DARK BACKGROUND */
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at top, #111, #000);
    color: #fff;
}

/* 🧊 CARD */
.container {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 40px;
    width: 360px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

h2 {
    margin-bottom: 8px;
    font-weight: 500;
}

p {
    font-size: 13px;
    color: #aaa;
}

/* OTP BOX */
.otp-box {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
}

/* INPUT */
.otp-box input {
    width: 45px;
    height: 55px;
    background: rgba(255,255,255,0.08);
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    transition: 0.25s;
}

/* ✨ FOCUS EFFECT */
.otp-box input:focus {
    outline: none;
    transform: translateY(-3px) scale(1.05);
    border-color: #6c63ff;
    box-shadow: 0 0 10px rgba(108,99,255,0.6);
}

/* ERROR */
.otp-box.error input {
    border-color: #ff4d4d;
    box-shadow: 0 0 8px rgba(255,77,77,0.7);
}

/* BUTTON */
button {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #6c63ff, #4f46e5);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(108,99,255,0.4);
}

/* RESEND */
.resend {
    margin-top: 15px;
    font-size: 13px;
    color: #888;
}

/* POPUP */
.popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.popup.show {
    opacity: 1;
    pointer-events: auto;
}

.popup-box {
    background: #111;
    border-radius: 14px;
    padding: 25px;
    width: 280px;
    text-align: center;
    transform: scale(0.85);
    transition: 0.3s;
}

.popup.show .popup-box {
    transform: scale(1);
}

.popup-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.success { color: #22c55e; }
.error { color: #ef4444; }

.popup button {
    margin-top: 15px;
    background: #6c63ff;
}

const inputs = document.querySelectorAll(".otp-box input");
const otpBox = document.getElementById("otpBox");

const popup = document.getElementById("popup");
const icon = document.getElementById("icon");
const title = document.getElementById("title");
const msg = document.getElementById("msg");

const CORRECT_OTP = "123456";

// INPUT UX
inputs.forEach((input, index) => {

input.addEventListener("input", (e) => {
        input.value = e.target.value.replace(/[^0-9]/g, '');

if (input.value && index < inputs.length - 1) {
            inputs[index + 1].focus();
        }
    });

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

input.addEventListener("paste", (e) => {
        let paste = e.clipboardData.getData("text").replace(/[^0-9]/g, '');
        if (paste.length === 6) {
            inputs.forEach((inp, i) => inp.value = paste[i]);
        }
    });
});

// VERIFY
function verifyOTP() {
    let otp = "";
    inputs.forEach(i => otp += i.value);

if (otp === CORRECT_OTP) {
        showPopup("success", "OTP verified successfully 🎉");
    } else {
        otpBox.classList.add("error");
        showPopup("error", "Invalid OTP. Try again");

setTimeout(() => {
            inputs.forEach(i => i.value = "");
            inputs[0].focus();
            otpBox.classList.remove("error");
        }, 800);
    }
}

// POPUP
function showPopup(type, message) {
    popup.classList.add("show");

title.innerText = type === "success" ? "Success" : "Error";
    icon.innerText = type === "success" ? "✔" : "✖";
    icon.className = "popup-icon " + type;
    msg.innerText = message;
}

function closePopup() {
    popup.classList.remove("show");
}

// TIMER
let t = 30;
setInterval(() => {
    if (t > 0) {
        t--;
        document.getElementById("timer").innerText = t;
    }
}, 1000);

// OTP AUTO-FILL
if ('OTPCredential' in window) {
    navigator.credentials.get({
        otp: { transport: ['sms'] },
        signal: new AbortController().signal
    }).then(otp => {
        inputs.forEach((inp, i) => inp.value = otp.code[i]);
    }).catch(console.error);
}

- Interactive OTP Form

Live Preview