- Home
- Web Designing
- Modern Registration Form using ...
Modern Registration Form using HTML, CSS & JavaScript
This is a modern Registration form created using HTML, CSS & JavaScript, designed to help users sign up quickly and easily. It includes input fields for name, email, password, and confirm password, along with a sign-up button. The layout is clean, fully responsive, and works well on all screen sizes. Perfect for user registration pages, account sign-up forms, or any Website Registration system, this design offers a smooth and professional way to collect user information.
In this post, we’re Create a clean and responsive Registration form built with HTML,CSS JavaScript. The form is designed to collect essential user information such as full name, email address, password, and confirm password, making it perfect for any sign-up page or account creation system. It features a minimal, modern layout that adapts to all screen sizes, ensuring a smooth user experience on both desktop and mobile devices. This HTML CSS sign-up form is easy to customize and integrate, ideal for web developers looking to build a functional and attractive user Registration page.
More Login and Registration Page
This post also provides the full source code so you can copy, edit, and use it in your own project. Feel free to experiment with the design, colors, fonts, or layout to match your website’s branding. A great-looking login form is a small detail that can make a big difference in your site’s professional look and user trust.
Here The Steps to Create Modern Registration Form:
1. Set up your HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css">
</head>
<body>
<div class="container">
<div class="registration-wrapper">
<div class="registration-image-wrap">
<div class="swiper regSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="reg-wrap">
<img decoding="async" src="images/slide-image01.jpg" alt="">
<div class="reg-content">
<h2>Capturing Movments, <br>Creating memories</h2>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="reg-wrap">
<img decoding="async" src="images/slide-image02.jpg" alt="">
<div class="reg-content">
<h2>Freezing Time, <br>Framing Emotions</h2>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="reg-wrap">
<img decoding="async" src="images/slide-image03.jpg" alt="">
<div class="reg-content">
<h2>Framing Feelings, <br>Not Just Faces</h2>
</div>
</div>
</div>
</div>
</div>
<div class="nav-bar">
<div class="logo">
<a href="#">ARU</a>
</div>
<button>Back to Website <i class="ri-arrow-right-line"></i></button>
</div>
</div>
<div class="registration-form-wrap">
<h1>Create an account</h1>
<p class="rfw-top">Already have Account? <a href="#">Log in</a></p>
<div class="registration-form">
<div class="registration-top">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
</div>
<input type="email" placeholder="Email">
<div class="password-input">
<input type="password" placeholder="Enter Your Password">
<i class="ri-eye-line see-password" id="ShowPassowrd-btn"></i>
</div>
</div>
<div class="terms">
<input type="checkbox">
<p>I agree to <a href="#">Terms & Conditions</a></p>
</div>
<button class="btn">Create account</button>
<div class="span">Or register with</div>
<div class="register-option">
<div class="option-box">
<img decoding="async" src="images/google-logo.png" alt="google-logo">
Google
</div>
<div class="option-box">
<img decoding="async" src="images/apple-logo.png" alt="apple-logo">
apple
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" defer data-deferred="1"></script> <script src="script.js" defer data-deferred="1"></script> <script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script></body>
</html>
2. Add CSS for styling
@import url('https://fonts.googleapis.com/css2?family=Nova+Script&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
scroll-behavior: smooth;
font-family: 'poppins';
}
:root{
--primary-color: #6E54B5;
--section-bg-color: #2D2638;
--body-color:#7a748e;
--black-color:#000;
--white-color:#fff;
--OpenSans:"Open Sans", sans-serif;
--Nova:"Nova Script", system-ui;
--transition-regular:.3s;
--transition-slow:.6s;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* background-color: var(--body-color); */
background-image: linear-gradient(0deg , rgb(113, 20, 185) 0% , #7a748e 100%);
}
.container{
background-color: var(--section-bg-color);
width: 100%;
height: 600px;
max-width: 1100px;
padding: 15px;
padding-right: 3%;
border-radius: 10px;
}
.registration-wrapper{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
}
.registration-image-wrap{
width: 50%;
height: 570px;
position: relative;
}
.nav-bar{
position: absolute;
top: 5%;
left: 0;
width: 100%;
padding: 0 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 5;
}
.nav-bar a{
font-family: var(--Nova);
font-size: 2rem;
color: var(--white-color);
}
.nav-bar button{
padding: 5px 20px;
border-radius: 50px;
border: none;
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
color: var(--white-color);
}
.reg-wrap{
width: 100%;
height: 100%;
position: relative;
}
.reg-content{
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50% , -50%);
width: 100%;
}
.reg-content h2{
font-size: 2rem;
font-weight: 500;
text-align: center;
color: var(--white-color);
font-family: var(--OpenSans);
}
.regSwiper{
width: 100%;
height: 100%;
}
.registration-image-wrap img{
width: 100%;
height: 100%;
border-radius: 10px;
}
.registration-form-wrap{
width: 50%;
display: flex;
flex-direction: column;
}
.registration-form-wrap h1{
font-size: 2.5rem;
color: var(--white-color);
font-family: var(--OpenSans);
font-weight: 600;
}
.registration-form-wrap p{
color: #b0abbe;
}
.rfw-top{
margin:5px 0;
}
.rfw-top a{
color: #b7a6e7;
text-decoration: underline;
}
.registration-form{
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 30px;
}
.registration-top{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.registration-form input{
width: 100%;
height: 50px;
padding-left: 5%;
background-color: #3B364C;
outline: none;
border:1px solid transparent;
border-radius: 5px;
font-size: 17px;
transition: var(--transition-regular);
&::placeholder{
color: var(--body-color);
}
}
.registration-form input:active,
.registration-form input:focus{
border: 1px solid var(--body-color);
color: var(--white-color);
&::placeholder{
color: var(--white-color);
}
}
.registration-form input:hover{
border: 1px solid var(--body-color);
color: var(--white-color);
}
.password-input{
position: relative;
}
.password-input i{
position: absolute;
top: 50%;
left: 94%;
transform: translate(-50%, -50%);
color: var(--body-color);
font-size: 1.3rem;
transition: var(--transition-regular);
}
.password-input i:hover{
color: var(--white-color);
cursor: pointer;
}
.terms{
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
}
.terms input{
width: 16px;
height: 16px;
}
.terms a{
color: #b7a6e7;
text-decoration: underline;
}
.btn{
width: 100%;
height: 50px;
background-color: var(--primary-color);
font-size: 1.2rem;
color: var(--white-color);
border: none;
border-radius: 5px;
margin: 10px 0;
transition: var(--transition-regular);
}
.btn:hover{
background-color: #6548b3;
cursor: pointer;
}
.span{
text-align: center;
margin: 10px 0;
color: var(--body-color);
position: relative;
}
.span:after{
content: '';
position: absolute;
top: 50%;
left: 0%;
width: 35%;
height: 1px;
background-color: var(--body-color);
}
.span:before{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 35%;
height: 1px;
background-color: var(--body-color);
}
.register-option{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.option-box{
width: 50%;
padding: 10px 0;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid var(--body-color);
font-size: 1.3rem;
font-family: var(--OpenSans);
color: var(--white-color);
transition: var(--transition-regular);
}
.option-box img{
width: 30px;
height: 30px;
object-fit: contain;
}
.option-box:hover{
border: 1px solid var(--primary-color);
cursor: pointer;
}
/* MQ Section */
@media (max-width:900px) {
body{
height: 100%;
}
.registration-wrapper{
flex-direction: column;
}
.registration-image-wrap{
width: 100%;
}
.container{
padding: 30px;
height: 100%;
max-width: 700px;
}
.registration-form-wrap{
width: 100%;
}
.terms{
margin: 25px 0;
}
}
@media (max-width:500px) {
.registration-top{
flex-direction: column;
}
.terms{
margin: 15px 0;
}
.container{
border-radius: 0;
}
}
3. Add JavaScript for interactivity
let ShowPassowrdbtn = document.querySelector('#ShowPassowrd-btn');
let input = document.querySelector("input[type='password']")
ShowPassowrdbtn.addEventListener('click' , function () {
if(input.type == 'password') {
input.type = 'text'
ShowPassowrdbtn.setAttribute('class' , 'ri-eye-off-line')
}
else {
input.type = 'password'
ShowPassowrdbtn.setAttribute('class' , 'ri-eye-line')
}
})
var swiper = new Swiper('.regSwiper', {
slidesPerView: 1,
spaceBetween: 10,
loop: true,
autoplay:{
delay:1500,
},
effect:'fade'
});
Watch More Tutorial On Youtube
CSS & JavaScript Registration form
html
mobile friendly Registration form
modern Registration form
Registration form
responsive Registration form
