Create an OTP Verification Form in HTML CSS & JavaScript Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article Like Report When the application is loaded, there is a button through which the user can generate the OTP. Once the user generates the OTP, the form for verification becomes visible, the user needs to enter the correct OTP that is generated. When the user enters the OTP in the input field, and if the OTP matches then the OTP gets verified and the user can generate more OTP. If the OTP is not matched, then the Generate OTP button remains disabled til the OTP is been verified. Preview Image:Approach:Firstly, create the overall layout or the structure of the application using HTML elements like <div>, <h1>, <button>, <input> etc.When the structure becomes ready, then the next task is to style the application with attractive styling properties of CSS. Some of the styling properties that we have used to style the application are background-color, margin, text-align, font-size etc. Once the styling of the application is done, then we can write the code for the functionality of verification in the JavaScript file. Using the Math.floor() and Math.random() functions in JavaScript, we generate the 4-digit numerical OTP when the Generate OTP button is clicked by the user. Using the if-else conditions, we are verifying the OTP by checking the Generated OTP and Inputted OTP matching. If this matches then the OTP gets verified and the Generate OTP button gets enabled for the user to generate more OTP. Example: This example describes the basic implementation for an OTP Verification Form in HTML, CSS & JavaScript. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GFG OTP Verification</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="card"> <div class="header"> <h1 style="color:green"> GeeksforGeeks </h1> <h2 style="color:black"> OTP Verification </h2> </div> <div class="content" id="content"> <button id="generateBtn" onclick="OTPFn()"> Generate OTP </button> <div id="otpForm" class="otp-form"> <input type="text" id="userOTP" placeholder="Enter OTP"> <button onclick="OTPVerifyFn()"> Verify </button> </div> <div id="successMessage" class="success-message"> <i class="fas fa-check"></i> <p>Congratulations Geek! OTP is Verified!</p> </div> <div id="errorMessage" class="error-message"></div> <div id="timer" class="timer"></div> </div> </div> </div> <script src="script.js"></script> </body> </html> CSS body { font-family: 'Montserrat', sans-serif; margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(to right, #667eea, #764ba2); } .container { width: 100%; max-width: 400px; } .card { background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .header { background-color: #fbf96f; color: #fff; padding: 20px; text-align: center; } .content { padding: 20px; } button { background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #45a049; } .otp-form { display: none; flex-direction: column; align-items: center; margin-top: 20px; } input { width: calc(100% - 30px); padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; outline: none; } .success-message { display: none; flex-direction: column; align-items: center; margin-top: 20px; color: #4CAF50; } .error-message { color: #e74c3c; margin-top: 10px; } button:disabled { background-color: #ccc; cursor: not-allowed; } .success-message p { margin: 10px 0; } .otp-display { margin-top: 20px; text-align: center; } .otp-text { font-size: 18px; margin: 0; } input:disabled { background-color: #f2f2f2; color: #a0a0a0; cursor: not-allowed; } .timer { margin-top: 10px; font-size: 14px; } JavaScript let otpGen; let timer; let secondsRemaining = 10; function OTPFn() { const btn = document.getElementById('generateBtn'); btn.disabled = true; clearFn(); otpGen = Math.floor(1000 + Math.random() * 9000); const temp = document.getElementById('content'); const showOtp = document.createElement('div'); showOtp.classList.add('otp-display'); showOtp.innerHTML = ` <p class="otp-text">Generated OTP: <span>${otpGen}</span> </p>`; temp.appendChild(showOtp); document.getElementById('otpForm').style.display = 'flex'; startTimer(); } function clearFn() { const prevOtp = document.querySelector('.otp-display'); if (prevOtp) { prevOtp.remove(); } resetTimer(); document.getElementById('errorMessage').innerText = ''; enableInputField(); } function OTPVerifyFn() { const userOtp = document.getElementById('userOTP').value; if (userOtp === "") { alert("Please enter OTP."); return; } const enterOtp = parseInt(userOtp); if (!isNaN(enterOtp)) { if (secondsRemaining > 0) { if (enterOtp === otpGen) { showMsgFn(); document.getElementById('generateBtn').disabled = false; resetTimer(); enableInputField(); } else { document.getElementById('errorMessage').innerText = 'Invalid OTP. Please try again.'; } } else { document.getElementById('errorMessage').innerText = 'OTP Expired. Please generate a new OTP.'; resetTimer(); } } else { alert("Invalid OTP. Please try again."); } } function showMsgFn() { const successMessage = document.getElementById('successMessage'); successMessage.style.animation = 'fadeIn 1s forwards'; successMessage.style.display = 'flex'; setTimeout(() => { successMessage.style.display = 'none'; }, 3000); } function startTimer() { timer = setInterval(function () { if (secondsRemaining <= 0) { clearInterval(timer); document.getElementById('generateBtn').disabled = false; document.getElementById('errorMessage').innerText = 'OTP Expired. Please generate a new OTP.'; resetTimer(); disableInputField(); } else { document.getElementById('timer').innerText = `Time Remaining: ${secondsRemaining} seconds`; secondsRemaining--; } }, 1000); } function resetTimer() { clearInterval(timer); document.getElementById('timer').innerText = ''; secondsRemaining = 10; } function disableInputField() { document.getElementById('userOTP').disabled = true; } function enableInputField() { document.getElementById('userOTP').disabled = false; } function clearFields() { document.getElementById('userOTP').value = ''; clearFn(); } Output: Comment More infoAdvertise with us Next Article Create an OTP Verification Form in HTML CSS & JavaScript G gpancomputer Follow Improve Article Tags : Project JavaScript Web Technologies Dev Scripter JavaScript-Projects Dev Scripter 2024 +2 More Similar Reads Create OTP Input Field using HTML CSS and JavaScript We will build an OTP (One-Time Password) input box, which is commonly used on many websites. This interactive and engaging UI element allows users to enter their OTP conveniently and efficiently. We will walk through the step-by-step process of creating this functionality using HTML, CSS, and JavaSc 3 min read How to create a Popup Form using HTML CSS and JavaScript ? To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webp 3 min read Create a Contact Form using HTML CSS & JavaScript A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission 3 min read Create an Online Payment Project using HTML CSS & JavaScript In this article, We will create a responsive online payment page using HTML, CSS & Javascript.Here, we will learn about the project's structure before beginning to code each page individually. To ensure adequate understanding, we also gave the project's output after it was created.Prerequisites: 4 min read Create a Guestbook using HTML CSS and JavaScript This article will show how to create a GuestBook using HTML, CSS, and JavaScript that allows users to add their name, mobile number, room number, and address to the guestbook. We have written a code that generates a card with multiple input boxes and a submit button to store the guest's information 3 min read Create a User Blocking project using HTML CSS & JavaScript The User Blocking project is a simple application that allows users to block or unblock certain users. It provides a basic interface to add users to a block list and remove them from the list. In this article, we are going to implement the functionality that can block a user by clicking a button and 4 min read How to Create a Form with Multiple Steps using CSS and JavaScript ? A multi-step form divides a long form into smaller, more manageable sections or steps. This makes it easier for users to fill out and makes the form less intimidating. We will explore the approach to building a multi-step form using CSS and JavaScript. ApproachCreate a form container. Inside the for 3 min read Create a Trigonometry Toolbox using HTML CSS and JavaScript This article will demonstrate how we can create a Trigonometry Toolbox using HTML, CSS, and JavaScript. Here, we have to give an angle in degrees as input in the input box and it calculates the corresponding value of the given angle. The application is user-friendly users can easily find the trigono 3 min read How to Create a Chips Component using HTML CSS & JavaScript ? In this article, we will see how we can create a chip component with the help of HTML, CSS, and JavaScript. In a chip component, there are basically two sections: one is the content section, and the other is the cross-button section. Both should be under one container with a proper border-radius. Pr 3 min read How To Create Registeration Form in HTML HTML Registration Form is a web-based form designed to collect user information such as name, email, password, and other details. It typically includes input fields, validation, and a submit button to register users on a website.HTML Registration FormHow to Create HTML Registration FormBasic Structu 2 min read Like