Introduction
The login and registration form, moreover, is an integral part of many websites, as it provides users with the ability to securely access content, and facilitates personalization of services. It allows users to access an account or register for a service, and therefore enjoy its functionality to the fullest, which in turn affects their satisfaction. Creating an aesthetically pleasing and functional form requires proper design and code.
In this article, we will discuss a sample login and registration form that was designed in HTML and CSS, and show how it can be customized to be more intuitive, which will certainly improve the user experience. We will also show how the interactive switch between login and registration works.
HTML structure
The main element of the form is a switch that allows you to change the mode between login and registration, so it adds convenience. The login form includes fields for email address and password. The registration form adds a field for the user's name and password.
The HTML code is divided into two sections. One section is responsible for login, the other for registration. A responsive container surrounds everything, so the form works properly on mobile devices.
CSS styling
The styling of this login and registration form It is based on a modern design. The main features include rounded edges, clear typography and interactive animations. The colors were chosen to provide an aesthetically pleasing appearance and ease of use.
Each form element is properly aligned and optimized. The CSS also includes hover and transition effects to enhance the user experience. With placeholder styles, the user can more easily identify the fields to fill in.
Summary
Designing a login and registration form is a key step in building modern websites, because a well-designed form not only serves its purpose, but also, more importantly, improves the user's experience and increases their trust in the site. The sample code presented above offers an elegant look and full functionality. Thanks to the HTML and CSS techniques used, the form is attractive and useful.
Creating your own login and registration form, you can use the examples provided. Remember to properly optimize for UX and responsiveness. A refined form improves the user experience, increasing the effectiveness of the site.
HTML CODE
<div class="section">
<div class="container">
<div class="row full-height justify-content-center">
<div class="col-12 text-center align-self-center py-5">
<div class="section pb-5 pt-5 pt-sm-2 text-center">
<h6 class="mb-0 pb-3"><span>LOG IN </span><span>REGISTER</span></h6>
<input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/>
<label for="reg-log"></label>
<div class="card-3d-wrap mx-auto">
<div class="card-3d-wrapper">
<!-- Formularz logowania -->
<div class="card-front">
<div class="center-wrap">
<div class="section text-center">
<h4 class="mb-4 pb-3">LOG IN</h4>
<div class="form-group">
<input type="email" name="logemail" class="form-style" placeholder="Your email" id="login-email" autocomplete="off">
<label for="login-email" class="placeholder-label">Your email</label>
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" name="logpass" class="form-style" placeholder="Your password" id="login-pass" autocomplete="off">
<label for="login-pass" class="placeholder-label">Your password</label>
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn btn-login mt-4">LOG IN</a>
<p class="mb-0 mt-4 text-center">
<a href="/en/</?php echo wp_lostpassword_url(); ?>" class="link">Don't remember your password?</a>
</p>
</div>
</div>
</div>
<!-- Formularz rejestracji -->
<div class="card-back">
<div class="center-wrap">
<div class="section text-center">
<h4 class="mb-4 pb-3">REGISTER</h4>
<div class="form-group">
<input type="text" name="regname" class="form-style" placeholder="Your name" id="register-name" autocomplete="off">
<label for="register-name" class="placeholder-label">Your name</label>
<i class="input-icon uil uil-user"></i>
</div>
<div class="form-group mt-2">
<input type="email" name="regemail" class="form-style" placeholder="Your email" id="register-email" autocomplete="off">
<label for="register-email" class="placeholder-label">Your email</label>
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" name="regpass" class="form-style" placeholder="Your password" id="register-pass" autocomplete="off">
<label for="register-pass" class="placeholder-label">Your password</label>
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn btn-register mt-4">REGISTER</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS CODE
/* LOGIN PAGE */.
.mb-0{
color:white !important;
padding-bottom:10px;
text-align:center;
}
.pb-3{
padding-bottom:10px;
text-align:center;
}
a {
cursor: pointer;
transition: all 200ms linear;
}
a:hover {
text-decoration: none;
}
.link {
color:#262626;
font-weight:600;
}
.link:hover {
color: #00add9;
}
p {
font-weight: 500;
font-size: 14px;
line-height: 1.7;
}
h4 {
font-weight: 600;
}
h6 span{
padding: 0 20px;
text-transform: uppercase;
font-weight: 700;
}
.section{
position: relative;
width: 100%;
display: block;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
position: absolute;
left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
display: block;
text-align: center;
width: 60px;
height: 16px;
border-radius: 8px;
padding: 0;
margin: 10px auto;
cursor: pointer;
background-color: white;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
display: block;
width: 36px;
height: 36px;
border-radius: 50%;
color: white;
background-color: #00add9;
font-family: '';
content: '\1F854';
z-index: 20;
top: -10px;
left: -10px;
line-height: 36px;
text-align: center;
font-size: 24px;
transition: all 0.5s ease;
}
.checkbox:checked + label:before {
transform: translateX(44px) rotate(-270deg);
}
.card-3d-wrap {
position: relative;
width: 440px;
max-width: 100%;
height: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
perspective: 800px;
margin-top: 60px;
}
.card-3d-wrapper {
width: 100%;
height: 100%;
position:absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 600ms ease-out;
}
.card-front, .card-back {
width: 100%;
height: 100%;
background-color: white;
background-position: bottom center;
background-repeat: no-repeat;
background-size: 300%;
position: absolute;
border-radius: 6px;
left: 0;
top: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
transform: rotateY(180deg);
}
.center-wrap{
position: absolute;
width: 100%;
padding: 0 35px;
top: 50%;
left: 0;
transform: translate3d(0, -50%, 35px) perspective(100px);
z-index: 20;
display: block;
}
.form-group{
position: relative;
display: block;
margin: 15px;
padding: 0;
}
.form-style {
padding: 13px 20px;
padding-left: 55px;
height: 48px;
width: 100%;
font-weight: 500;
border-radius: 4px;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.5px;
outline: none;
color: #c4c3ca;
background-color: #1f2029;
border: none;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
border: none;
outline: none;
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
position: absolute;
top: 0;
left: 18px;
height: 48px;
font-size: 24px;
line-height: 48px;
text-align: left;
color: #ffeba7;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.btn{
margin-top:10px;
margin-bottom:10px;
border-style:solid !important;
border-width:1px !important;
border-color:#00add9 !important;
height:44px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
-webkit-transition : all 200ms linear;
transition : all 200ms linear;
padding : 0 30px;
letter-spacing: 1px;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
text-align: center;
border: none;
background-color: #00add9;
color: white;
box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);
}
.btn:active,
.btn:focus{
background-color: #102770;
color: #ffeba7;
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.btn:hover{
background-color: #10277000;
color: #00add9;
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
border-style:solid;
border-width:1px;
border-color:#00add9;
}
/* END OF LOGIN */.
input{
font-size:12px !important;
padding:25px !important;
}
.input-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 500px;
margin-bottom: 20px;
}
#email, #name, #phone,
textarea {
width: 100%;
padding: 15px !important;
border: 1px solid #f7f8f9 !important;
border-radius: 20px !important;
font-size: 12px !important;
outline: none;
position: relative;
resize: none;
background: #121125 !important;
}
.placeholder-label {
position: absolute;
font-family: montserrat;
top: 50%;
left: 10px;
transform: translateY(-50%);
background: white;
padding: 0px 10px;
color: #d3d3d3;
font-size: 12px;
transition: all 0.3s ease;
pointer-events: none;
}
input:focus + .placeholder-label,
input:not(:placeholder-shown) + .placeholder-label,
textarea:focus + .placeholder-label,
textarea:not(:placeholder-shown) + .placeholder-label {
top: 0;
font-size: 12px;
color: #00add9;
}
input::placeholder,
textarea::placeholder {
color: transparent;
}