Table of Contents
Introduction:
Welcome to the tutorial on creating a modern and responsive registration/sign-up form using HTML, CSS, and JavaScript. Crafting an intuitive registration form is essential for enhancing user experience and engagement on your website. This tutorial will guide you through the process of building a sleek and user-friendly registration form that adapts seamlessly to various devices and screen sizes.
Whether you’re a beginner eager to learn or an experienced developer looking to enhance your skills, this tutorial provides valuable insights into the fundamentals of web development. Let’s embark on this coding journey to create a registration form that not only meets modern design standards but also ensures a smooth and efficient user registration process.
Join Our Telegram Channel to Download the Project Source Code: Click Here
4 Steps to Set Up: Modern Registration Form
Please follow this Step-by-Step Guide to Create and Setup Responsive and Modern Registration Form or Sing Up From for a Sleek User Experience! using HTML, CSS and JavaScript —
Step 1: Create Project Files
Start by creating a project folder and naming it according to your preference. Inside the folder, create three files: index.html for the structure, style.css for styling, and script.js for interactivity. This foundational step establishes the framework for building your modern registration form.
Step 2: HTML Structure
In the index.html file, paste the provided HTML code to outline the structure of your registration form. Utilize semantic HTML elements to define key sections such as user details, email, password, and confirmation. Semantic tags enhance accessibility and optimize search engine visibility for your form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing File</title>
</head>
<body>
<form class="container">
<h2 class="heading">Sign Up</h2>
<div class="steps-container">
<hr>
<hr class="active">
<div class="steps"><i class="fa-solid fa-user"></i></div>
<div class="steps"><i class="fa-solid fa-envelope"></i></div>
<div class="steps"><i class="fa-solid fa-key"></i></div>
<div class="steps"><i class="fa-solid fa-trophy"></i></div>
</div>
<div class="input-slide-contianer">
<scroller>
<div class="input-slide">
<h3>User Name</h3>
<p><i>Username is your online identity</i></p>
<ul class="rules">
<li>Your username should only contain letters, numbers, underscores or hyphens. </li><li>No spaces or special characters allowed.</li>
<li>Your username should not be offensive or contain profanity.</li>
</ul>
<input type="text" placeholder="Type your username Here" name="username" class="username">
<div class="full-name"><input type="text" placeholder="First Name" name="firstname">
<input type="text" name="lastname" class="lastname" placeholder="Last Name"></div>
<button class="button-nex" onclick="NextSlide(1)">Next</button>
</div>
<div class="input-slide user-detail">
<h3>Email</h3>
<p><i>Email is the gateway to your digital life</i></p>
<ul class="rules">
<li>Please enter valid email in the format "example@example.com".</li>
<li>we value your privacy and will never use your email for any unauthorized purposes.</li>
<li>Please don't use email that belong to someone else.</li>
<li>Please don't use email that includes personal information.</li>
</ul>
<input type="email" name="email" class="email" placeholder="Email">
<button class="button-nex" onclick="NextSlide(2)">Next</button>
</div>
<div class="input-slide password-slide">
<h3>Password</h3>
<p><i>Secure your account with a strong password</i></p>
<ul class="rules">
<li>Include a mix of uppercase and lowercase letters, numbers, and special characters.</li>
<li>Avoid using common or easily guessable passwords.</li>
<li>Do not use personal information.</li>
</ul>
<input type="password" name="password" class="password" placeholder="Password">
<input type="password" name="confirm-password" class="confirm-password" placeholder="Confirm Your Password">
<button class="button-nex" onclick="NextSlide(3)">Next</button>
</div>
<div class="input-slide finish-slide">
<h3>Congratulations!</h3>
<p><i>You have completed all the steps required for registration.</i></p>
<ul class="rules">
<li>Before submitting your information, please take a moment to ensure that all the details provided are correct. </li>
<li> We take the privacy and security of our users very seriously, and it is important that all the information provided is accurate and up-to-date.</li>
<li>Once you have confirmed that everything is in order, simply click the 'Submit' button.</li>
</ul>
<button type="submit" class="button-nex" disabled>Sumbit</button>
</div>
</scroller>
</div>
<button class="GoBack" onclick="GoBack()"><i class="fa-solid fa-arrow-left"></i></button>
</form>
</body>
</html>Step 3: Style with CSS
Insert the CSS code provided into your style.css file to apply visual enhancements and ensure a modern aesthetic for your registration form. Customize the styles as needed to align with your website’s branding and design preferences. CSS plays a crucial role in creating an appealing and responsive layout for your form.
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height:100vh;
background-color: #343a40;
display: flex;
}
.container{
width:500px;
height:500px;
margin:auto;
border-radius: 5px;
border:1px solid #ced4da;
font-family: Exo;
color:white;
background-color: #212529;
display: flex;
flex-direction: column;
padding:10px;
position: relative;
overflow: hidden;
}
.heading{
padding:20px;
font-weight: 900;
text-align: center;
font-size: 2em;
}
.steps-container{
position: relative;
display: flex;
height: 50px;;
margin:10px;
width:calc(100% - 20px)
}
.steps-container>hr{
width:100%;
height:5px;
background-color: white;
border-radius: 20px;
margin-top:25px;
position: absolute;
z-index:0;
border:none;
}
.steps-container>.active{
background:#80ed99;
width:0%;
}
.steps-container>.steps{
width:45px;
height:45px;
border-radius: 50%;
background-color: #f8f9fa;
color:#212529;
font-size: 1.4em;
display: flex;
border:5px solid #212529;
margin:auto;
position: relative;
box-sizing: content-box;
z-index: 1;
overflow: hidden;
}
.steps-container>.steps::after{
content:'';
position: absolute;
width:0%;
height: 45px;
background-color: #80ed99;
border-radius: 50%;
z-index: 2;
}
.steps-container>.steps>i{
margin:auto;
z-index: 3;
}
.input-slide-contianer{
width: 100%;
flex:1;
display:flex;
overflow: hidden;
}
scroller{
width:fit-content;
display: flex;
margin-left:0px;
transition-duration: 0.5s;
}
.input-slide-contianer>scroller>.input-slide{
width:478px;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.input-slide>h3{
text-align: center;
}
.input-slide>.rules{
list-style-type: disc;
display: flex;
flex-direction: column;
margin:auto;
padding-left:20px;
}
.input-slide>.rules>li{
padding:5px 0;
}
.input-slide input{
width:calc(100% - 20px);
padding:10px;
background-color: #6c757d;
outline:none;
border-radius:10px;
border:none;
/* box-shadow:1px 1px 15px 0.5px rgba(0, 0, 0, 0.5); */
margin:auto 10px;
font-size: 1.01em;
color:white;
box-sizing: border-box;
transition-duration: 0.3s;
position: relative;
}
.input-slide input::placeholder{
color:white !important;
font-size: 1.01em;
}
.input-slide input:focus{
border: 1px solid lime;
}
.button-nex{
padding:8px 20px;
border-radius: 20px;
color:white;
font-weight: 800;
outline:none;
border:none;
margin:auto;
margin-right:10px;
font-family:Exo;
font-size: 1em;
cursor:pointer;
background-color: #52b788;
}
.button-nex:hover{
background-color: #40916c;
}
.full-name{
display: flex;
}
.user-detail>input{
align-items: start;
margin:10px;
}
.user-detail>button{
margin:10px;
margin-left:auto;
}
.user-detail>.email{
width:calc(100% - 20px)
}
.input-slide p{
font-size: 0.8em;
text-align: center;
}
.finish-slide{
line-height:1.4em
}
:root{
--BarStartWidth:0%;
--BarEndWidth:calc(var(--BarStartWidth) + 25%);
}
.animateStep{
width:var(--BarEndWidth);
background-color: black;
animation: ZerotoHeroWidth 0.5s ease;
}
.PassedStep::after{
width:100% !important;
transition: 1s;
}
.GoBack{
width:fit-content;
padding:0px 10px;
font-size: 1.5em;
font-weight: 900;
position: absolute;
border-radius: 5px;
background-color: transparent;
border:none;
color:white;
cursor:pointer;
left:-50px;
}
.GoBack:hover{
background-color: #40916c;
}
@keyframes ZerotoHeroWidth{
0%{
width:0%;
}
100%{
width:100%
}
}
@keyframes GoBackBtnVisible {
0%{
left:-50px;
}
100%{
left:10px;
}
}
@keyframes GoBackBtnInvisible {
0%{
left:10px;
}
100%{
left:-50px;
}
}Step 4: Implement JavaScript Interactivity
Next, integrate the provided JavaScript code into your script.js file to add interactive functionality to the registration form. The JavaScript code includes features such as slide transitions and input validation to enhance user experience and streamline the registration process. Feel free to modify the JavaScript code to incorporate additional features or customizations.
var GlobalSlideNo;
function NextSlide(SlideNo){
GlobalSlideNo=SlideNo
event.preventDefault()
if(SlideNo==1){
document.querySelector(".GoBack").style.animation="GoBackBtnVisible 0.25s ease"
document.querySelector(".GoBack").onanimationend=function(){
this.style.animation=""
this.style.left="10px"
}
}
console.log(parseInt(window.getComputedStyle(document.querySelector("scroller")).getPropertyValue("margin-left"))-478);
document.querySelector("scroller").style.marginLeft=parseInt(window.getComputedStyle(document.querySelector("scroller")).getPropertyValue("margin-left"))-478+"px";
MoveIndicationBar(SlideNo)
}
IndicatorObj={
startVal:0,
EndVal:25,
currentWidth:0
}
function MoveIndicationBar(i){
var step=document.querySelectorAll(".steps")[i-1]
IndicatorObj.StepNo=i
console.log(step)
IndicatorObj.EndVal=i*25
ZerotoHeroWidth()
}
function ZerotoHeroWidth(){
var bar=document.querySelector(".active")
var step=document.querySelectorAll(".steps")[IndicatorObj.StepNo-1]
barStyle=parseInt(window.getComputedStyle(bar).width)
if(IndicatorObj.currentWidth>IndicatorObj.EndVal/2){
step.classList.add("PassedStep")
}
if(IndicatorObj.currentWidth<IndicatorObj.EndVal){
IndicatorObj.currentWidth+=1
bar.style.width=IndicatorObj.currentWidth+"%"
window.requestAnimationFrame(ZerotoHeroWidth)
}
}
function GoBack(){
event.preventDefault()
console.log(GlobalSlideNo)
if(GlobalSlideNo<2){
document.querySelector(".GoBack").style.animation="GoBackBtnInvisible 0.25s ease"
document.querySelector(".GoBack").onanimationend=function(){
this.style.animation=""
this.style.left="-50px"
}
}
GlobalSlideNo-=1
console.log(parseInt(window.getComputedStyle(document.querySelector("scroller")).getPropertyValue("margin-left"))+478);
document.querySelector("scroller").style.marginLeft=parseInt(window.getComputedStyle(document.querySelector("scroller")).getPropertyValue("margin-left"))+478+"px";
document.querySelector(".GoBack").onclick=function(){
event.preventDefault()
}
setTimeout(function(){
document.querySelector(".GoBack").onclick=GoBack
},500)
MoveIndicationBarMinus(GlobalSlideNo)
}
IndicatorObj={
startVal:25,
EndVal:0,
currentWidth:0
}
function MoveIndicationBarMinus(i){
IndicatorObj.StepNo=i
IndicatorObj.EndVal=i*25
HerotoZeroWidth()
console.log(IndicatorObj)
}
function HerotoZeroWidth(){
var bar=document.querySelector(".active")
var step=document.querySelectorAll(".steps")[IndicatorObj.StepNo-1]
barStyle=parseInt(window.getComputedStyle(bar).width)
if(IndicatorObj.currentWidth>IndicatorObj.EndVal){
IndicatorObj.currentWidth-=1
bar.style.width=IndicatorObj.currentWidth+"%"
window.requestAnimationFrame(HerotoZeroWidth)
}
}Conclusion:
In conclusion, by following these steps, you can create a modern and responsive registration/sign-up form for your website. A well-designed registration form not only facilitates user registration but also contributes to a positive user experience, ultimately enhancing user engagement and retention.
Mastering the creation of registration forms using HTML, CSS, and JavaScript is a valuable skill for any web developer. Embrace this tutorial as an opportunity to refine your coding abilities and elevate the functionality and aesthetics of your website’s registration process.
Start building your modern registration form today and unlock the potential to captivate and delight users with a seamless registration experience.
Code by – https://codepen.io/MuzammalAhmed/
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
