Components Library CSS CSS Material UI Form HTML HTML Material UI JavaScript JavaScript Material UI Material UI
Modern Log in Sign up Form in HTML, CSS and JavaScript
The Log in and Sign up form represents a kind of greeting and the first step for users that visit a website or use an application which will require their input of personal data. A better login form design can improve the process making it easy for a user to navigate through the design.
In this post, I feel glad share you a free source code of Modern Log in Sign up Form. It is recommended for use in any web based project since it uses clean HTML and CSS for easier integration and modification.
GitHub Source: Modern Login/Sign Up Form
Features
- Customization – Although adding some basic color, font, and style changes to any template is very easy it is not flexible compared to a fully customized design.
- Compatibility – Suitable with WordPress, Joomla, Shopify, and other comparable systems.
- Clean Code – Such code contains comments for easy follow and no possible confusion while modifying it.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Video Tutorial
Steps to Build Form
- Setting Up – First, the user should make a brand new folder that will contain all the needed files.
- Create index.html – Create new HTML file in which will be the form structure specified.
- Create style.css – By placing the styling into a style.css file the page will look more professional and responsive.
- Create script.js – Here, you will add all the script or JavaScript for the form interaction or any form of animation wanted on the page.
- The Final Step: Make sure you follow the link or, better yet, copy the following code.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Sign-in and Sign-up Form</title>
<!-- Link to external CSS for styling -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main container for form structure -->
<div class="form-structor">
<!-- Sign-up form section -->
<div class="signup">
<!-- Form title with optional separator -->
<h2 class="form-title" id="signup"><span>or</span>Sign up</h2>
<!-- Form-holder container for input fields -->
<div class="form-holder">
<!-- Input field for user's name -->
<input type="text" class="input" placeholder="Name" required />
<!-- Input field for user's email address -->
<input type="email" class="input" placeholder="Email" required />
<!-- Input field for user's password -->
<input type="password" class="input" placeholder="Password" required />
</div>
<!-- Submit button for sign-up form -->
<button class="submit-btn">Sign up</button>
</div>
<!-- Login form section with "slide-up" animation -->
<div class="login slide-up">
<div class="center">
<!-- Form title with optional separator -->
<h2 class="form-title" id="login"><span>or</span>Log in</h2>
<!-- Form-holder container for input fields -->
<div class="form-holder">
<!-- Input field for user's email address -->
<input type="email" class="input" placeholder="Email" required />
<!-- Input field for user's password -->
<input type="password" class="input" placeholder="Password" required />
</div>
<!-- Submit button for login form -->
<button class="submit-btn">Log in</button>
</div>
</div>
</div>
<!-- Link to external JavaScript file for form behavior -->
<script src="script.js"></script>'
</body>
</html>
CSS
Here is the complete code for style.css file to style the form:
@import url("https://fonts.googleapis.com/css?family=Fira+Sans");
html, body {
position: relative;
min-height: 100vh;
background-color: #E1E8EE;
display: flex;
align-items: center;
justify-content: center;
font-family: "Fira Sans", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.form-structor {
background-color: #222;
border-radius: 15px;
height: 550px;
width: 350px;
position: relative;
overflow: hidden;
}
.form-structor::after {
content: '';
opacity: 0.8;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-repeat: no-repeat;
background-position: left bottom;
background-size: 500px;
background-image: url('https://images.unsplash.com/photo-1729731322011-f945437445be?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}
.signup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65%;
z-index: 5;
transition: all 0.3s ease;
}
.signup.slide-up {
top: 5%;
transform: translate(-50%, 0%);
transition: all 0.3s ease;
}
.signup.slide-up .form-holder,
.signup.slide-up .submit-btn {
opacity: 0;
visibility: hidden;
}
.signup.slide-up .form-title {
font-size: 1em;
cursor: pointer;
}
.signup.slide-up .form-title span {
margin-right: 5px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}
.signup .form-title {
color: #fff;
font-size: 1.7em;
text-align: center;
}
.signup .form-title span {
color: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.signup .form-holder {
border-radius: 15px;
background-color: #fff;
overflow: hidden;
margin-top: 50px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}
.signup .form-holder .input {
border: 0;
outline: none;
box-shadow: none;
display: block;
height: 30px;
line-height: 30px;
padding: 8px 15px;
border-bottom: 1px solid #eee;
width: 100%;
font-size: 12px;
}
.signup .form-holder .input:last-child {
border-bottom: 0;
}
.signup .form-holder .input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
.signup .submit-btn {
background-color: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.7);
border: 0;
border-radius: 15px;
display: block;
margin: 15px auto;
padding: 15px 45px;
width: 100%;
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}
.signup .submit-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}
.login {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 5;
transition: all 0.3s ease;
}
.login::before {
content: '';
position: absolute;
left: 50%;
top: -20px;
transform: translate(-50%, 0);
background-color: #fff;
width: 200%;
height: 250px;
border-radius: 50%;
z-index: 4;
transition: all 0.3s ease;
}
.login .center {
position: absolute;
top: calc(50% - 10%);
left: 50%;
transform: translate(-50%, -50%);
width: 65%;
z-index: 5;
transition: all 0.3s ease;
}
.login .center .form-title {
color: #000;
font-size: 1.7em;
text-align: center;
}
.login .center .form-title span {
color: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.login .center .form-holder {
border-radius: 15px;
background-color: #fff;
border: 1px solid #eee;
overflow: hidden;
margin-top: 50px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}
.login .center .form-holder .input {
border: 0;
outline: none;
box-shadow: none;
display: block;
height: 30px;
line-height: 30px;
padding: 8px 15px;
border-bottom: 1px solid #eee;
width: 100%;
font-size: 12px;
}
.login .center .form-holder .input:last-child {
border-bottom: 0;
}
.login .center .form-holder .input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
.login .center .submit-btn {
background-color: #6B92A4;
color: rgba(255, 255, 255, 0.7);
border: 0;
border-radius: 15px;
display: block;
margin: 15px auto;
padding: 15px 45px;
width: 100%;
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}
.login .center .submit-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}
.login.slide-up {
top: 90%;
transition: all 0.3s ease;
}
.login.slide-up .center {
top: 10%;
transform: translate(-50%, 0%);
transition: all 0.3s ease;
}
.login.slide-up .form-holder,
.login.slide-up .submit-btn {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.login.slide-up .form-title {
font-size: 1em;
margin: 0;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.login.slide-up .form-title span {
margin-right: 5px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}
JavaScript
Here is the complete code for script.js file to function the form:
console.clear();
const loginBtn = document.getElementById('login');
const signupBtn = document.getElementById('signup');
loginBtn.addEventListener('click', (e) => {
let parent = e.target.parentNode.parentNode;
Array.from(e.target.parentNode.parentNode.classList).find((element) => {
if(element !== "slide-up") {
parent.classList.add('slide-up')
}else{
signupBtn.parentNode.classList.add('slide-up')
parent.classList.remove('slide-up')
}
});
});
signupBtn.addEventListener('click', (e) => {
let parent = e.target.parentNode;
Array.from(e.target.parentNode.classList).find((element) => {
if(element !== "slide-up") {
parent.classList.add('slide-up')
}else{
loginBtn.parentNode.parentNode.classList.add('slide-up')
parent.classList.remove('slide-up')
}
});
});
Download Source Code
Here, it is showing the complete source code of the Modern Log in & Sign up Form through HTML & CSS. It is open source code that can be easily downloaded by any webmaster and incorporated into his site without the issues of copyright. All you need to do is to push the button to download and use it in your projects.
Conclusion
You can employ this HTML and CSS code for Modern Log in Sign up Form in your project to make it look even better or construct it yourself and save time. Do not forget to make a link to the websites of JV Source Codes to help them with more resources.
If you want me to explain or answer please do so in the comments section and I will be more than glad to assist.
