Simple Registration Form Using HTML & CSS
This simple Registration form is built using HTML and CSS, providing a clean and responsive design for user sign-up. It includes input fields for full name, email, password, and confirm password, along with a sign-up button. The form layout is fully mobile-friendly, making it ideal for all screen sizes. Styled with a modern and minimal interface, it’s perfect for websites, blogs, or any user registration system. Easy to customize and integrate, this HTML CSS registration form helps improve the overall user experience in any web project.
In this post, we’re creating a clean and responsive registration form using HTML and CSS. This sign-up form is designed to collect essential user details like full name, email address, password, and confirm password, making it ideal for any user registration system or account creation page. It features a modern, minimal UI layout that is fully mobile-responsive, ensuring a seamless experience on both desktop and mobile devices. Easy to customize and integrate, this HTML CSS registration form is perfect for developers building a simple, user-friendly, and stylish sign-up interface for their web projects.
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 Simple 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>Simple Registration </title>
<!-- Link CSS -->
<link rel="stylesheet" href="style.css">
<!-- Remix Icon CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css">
</head>
<body>
<div class="login-wrapper">
<div class="login-content">
<h3>Create an Account</h3>
<p>Sign up and Get 30 Days Free Trial </p>
<form>
<div class="input-wrapper">
<label>Full Name</label>
<input type="text" placeholder="Full Name">
</div>
<div class="input-wrapper">
<label>Email</label>
<input type="email" placeholder="Email">
</div>
<div class="input-wrapper">
<label>Password</label>
<input type="password" placeholder="Password">
</div>
<button>Submit</button>
</form>
<div class="login-btn-wrapper">
<div class="login-btn">
<img decoding="async" src="Assets/apple-logo.jpg" alt="google-logo" height="30">
<span>Apple</span>
</div>
<div class="login-btn">
<img decoding="async" src="Assets/google.jpg" alt="facebook-logo" height="25">
<span>Google</span>
</div>
</div>
<div class="login-bottom-wraper">
<p>Have any Account ? <a href="#">Sign in</a></p>
<a href="#">Terms and Condition</a>
</div>
</div>
<div class="login-image">
<img decoding="async" src="Assets/login-image.jpg" alt="login-background-image">
</div>
<i class="ri-close-line" id="close-btn"></i>
</div>
</body>
</html>
2. Add CSS for styling
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'roboto';
}
body {
background-color: #90959f;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.login-wrapper {
width: 100%;
height: 600px;
background: linear-gradient(180deg , #ddd , #fff2c0 60%);
border-radius: 30px;
max-width: 1100px;
display: flex;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
position: relative;
transition: .6s;
transform: translateY(-80px);
opacity: 0;
animation: appearLogin 0.6s forwards linear;
}
@keyframes appearLogin {
0%{
transform: translateY(-80px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
.remove-login {
transform: translateY(-80px) !important;
opacity: 0 !important;
}
.login-content {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
padding: 0 8%;
position: relative;
}
.login-content h3{
font-weight: 400;
font-size: 28px;
}
.login-content p{
font-weight: 400;
font-size: 14px;
color: #2c2c2c;
}
.login-content form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin: 10px auto;
margin-top: 20px;
}
.login-content form .input-wrapper{
width: 100%;
display: flex;
flex-direction: column;
position: relative;
border-radius: 15px;
gap: 5px;
}
.login-content form .input-wrapper label{
font-size: 12px;
margin-left: 10px;
}
.login-content form .input-wrapper input{
height: 40px;
width: 100%;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.5);
color: #1e1e1e;
padding-left: 15px;
border-radius: 30px;
}
.login-content form button {
height: 40px;
width: 100%;
border-radius: 30px;
border: none;
background: #FFD85F;
font-size: 14px;
font-weight: 500;
color: #1e1e1e;
margin-top: 10px;
cursor: pointer;
}
.login-btn-wrapper {
width: 100%;
display: flex;
align-items: center;
gap: 20px;
}
.login-btn {
height: 40px;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 15px;
cursor: pointer;
}
.login-btn img {
mix-blend-mode: multiply;
}
.login-image {
width: 50%;
height: 100%;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#close-btn {
position: absolute;
top: -10px;
right: -10px ;
height: 40px;
width: 40px;
background-color: #1e1e1e;
color: #FFD85F;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius:50%;
cursor: pointer;
}
.login-image img {
height: 90%;
width: 90%;
border-radius: 20px;
object-fit: cover;
}
.login-bottom-wraper {
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
bottom: 20px;
left: 0;
padding: 0 5%;
}
.login-bottom-wraper p ,
.login-bottom-wraper a {
color: #1e1e1e;
font-size: 14px;
}
.login-bottom-wraper p a {
font-weight: 700;
}
@media screen and (max-width:1400px) {
.login-wrapper {
height: 500px;
max-width: 900px;
}
.login-content form .input-wrapper label{
margin-left: 10px;
margin-bottom: 0px;
}
.login-content form .input-wrapper input{
height: 35px;
}
}
@media screen and (max-width:900px) {
.login-wrapper {
width: 100%;
max-width: 450px;
}
.login-wrapper .login-image {
display: none;
}
.login-wrapper .login-content {
width: 100%;
}
}
Watch More Tutorial On Youtube
HTML CSS Registration form
mobile friendly Registration form
modern Registration form
Registration form
responsive Registration form
simple Registration form
