Simple Sign-Up/Login Form in HTML, CSS and JavaScript
A Simple Sign-Up/Login Form is the first and must-have form on any website that must sign up for the user to authenticate.
From this tutorial you’ll be able to create a trendy form using only HTML, CSS, and JavaScript. Also, I will give free code that would enable you to design a basic sign up form from scratch.
GitHub Source: Simple Sign-Up/Login Form
Features
Below are some of the unique features with which Simple Sign-Up/Login Form comes with:
- Easy to Customize: It really allows for easy modification of styles and layouts to better fit your website design.
- Compatible with All Modern CMS: This form is fully compatible with most of the Content Management Systems, thus integration is not a big issue.
- Clean Code: The source code is well-documented and structured that will allow any change by any developer in the future smoothly.
- Form Validation: This form has in-built validation; users enter correct information that improves the overall user experience and data accuracy.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Video Tutorial
Steps to Build Form
It is easy to Build a Simple Sign-Up/Login Form. Follow these simple steps to set up your project:
- Create Project Folder: First, it is recommended to construct a fresh folder for the project to possess all files in order.
- Create index.html: I recommend an index.html file within the project folder to store the HTML form structure of your project.
- Create style.css: Following it, create a style.css file to give proper styles and give it a presentable look as the form is a front-end part of your website.
- Create script.js: It is also important that you put all the functions of the form in a script.js file, including the validation checks and page transitions.
- Copy & Paste the Code: Last but not least, you have to paste the following source codes at the corresponding files to finish the configuration of your form.
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">
<link rel="stylesheet" href="style.css"> <!-- Link to your CSS -->
<title>Sign Up / Log In Form</title>
</head>
<body>
<div class="form">
<h1>Welcome</h1>
<ul class="tab-group">
<li class="active"><a href="#" id="signup-tab">Sign Up</a></li>
<li><a href="#" id="login-tab">Log In</a></li>
</ul>
<div id="signup">
<form>
<div class="field-wrap">
<label for="signup-name">Name:</label>
<input type="text" id="signup-name" required>
</div>
<div class="field-wrap">
<label for="signup-email">Email:</label>
<input type="email" id="signup-email" required>
</div>
<div class="field-wrap">
<label for="signup-password">Password:</label>
<input type="password" id="signup-password" required>
</div>
<button type="submit" class="button button-block">Get Started</button>
</form>
</div>
<div id="login">
<form>
<div class="field-wrap">
<label for="login-email">Email:</label>
<input type="email" id="login-email" required>
</div>
<div class="field-wrap">
<label for="login-password">Password:</label>
<input type="password" id="login-password" required>
</div>
<button type="submit" class="button button-block">Log In</button>
</form>
</div>
</div>
<script src="script.js"></script> <!-- Link to your JavaScript -->
</body>
</html>
CSS
Here is the complete code for style.css file to style the form:
/* Color Variables */
:root {
--body-bg: #fde9da; /* Background color for the body */
--form-bg: rgba(19, 35, 47, 0.9); /* Background color for the form with opacity */
--white: #ffffff; /* Standard white color */
/* Primary Color Variables */
--main: #1ab188;
--main-light: #1fbf8e; /* Approximate lightened value */
--main-dark: #16997e; /* Approximate darkened value */
/* Grayscale Variables */
--gray-light: #a0b3b0;
--gray: #ddd;
/* Font Weight Variables */
--thin: 300;
--bold: 600;
--border-radius: 4px;
}
/* Global Reset and Box Sizing */
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll; /* Ensuring scroll is always visible for consistent layout */
}
/* Body Styling */
body {
background: var(--body-bg);
font-family: 'Titillium Web', sans-serif;
}
/* Link Styling */
a {
text-decoration: none;
color: var(--main);
transition: 0.5s ease;
}
a:hover {
color: var(--main-dark);
}
/* Main Form Container Styling */
.form {
background: var(--form-bg);
padding: 40px;
max-width: 600px;
margin: 180px auto;
border-radius: var(--border-radius);
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
/* Tab Navigation Styling */
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: var(--gray-light);
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: 0.5s ease;
}
.tab-group li a:hover {
background: var(--main-dark);
color: var(--white);
}
.tab-group .active a {
background: var(--main);
color: var(--white);
}
/* Hide both signup and login sections initially */
#signup, #login {
display: none;
}
/* Header Styling */
h1 {
text-align: center;
color: var(--white);
font-weight: var(--thin);
margin: 0 0 40px;
}
/* Label Styling */
label {
position: absolute;
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
transition: all 0.25s ease;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: var(--main);
}
/* Active Label Styling */
label.active {
transform: translateY(50px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: var(--white);
}
/* Input and Textarea Styling */
input, textarea {
font-size: 22px;
display: block;
width: 100%;
padding: 5px 10px;
background: none;
border: 1px solid var(--gray-light);
color: var(--white);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: var(--main);
}
/* Textarea Specific Styling */
textarea {
border: 2px solid var(--gray-light);
resize: vertical;
}
/* Field Container Styling */
.field-wrap {
position: relative;
margin-bottom: 40px;
}
/* Row Layout for Name Fields */
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin-right: 0;
}
/* Button Styling */
.button {
border: none;
padding: 15px 0;
font-size: 2rem;
font-weight: var(--bold);
text-transform: uppercase;
letter-spacing: 0.1em;
background: var(--main);
color: var(--white);
transition: all 0.5s ease;
appearance: none;
}
.button:hover, .button:focus {
background: var(--main-dark);
}
/* Block Style for Button */
.button-block {
display: block;
width: 100%;
}
/* Forgot Password Link Styling */
.forgot {
margin-top: -20px;
text-align: right;
}
/* Ensure the Signup form is displayed by default */
#signup {
display: block; /* Show Sign Up by default */
}
JavaScript
Here is the complete code for script.js file to function the form:
document.addEventListener("DOMContentLoaded", function () {
// Get tab buttons
const signupTab = document.getElementById('signup-tab');
const loginTab = document.getElementById('login-tab');
// Get forms
const signupForm = document.getElementById('signup');
const loginForm = document.getElementById('login');
// Function to switch to signup
function showSignup() {
signupForm.style.display = 'block';
loginForm.style.display = 'none';
signupTab.parentElement.classList.add('active');
loginTab.parentElement.classList.remove('active');
}
// Function to switch to login
function showLogin() {
loginForm.style.display = 'block';
signupForm.style.display = 'none';
loginTab.parentElement.classList.add('active');
signupTab.parentElement.classList.remove('active');
}
// Event listeners
signupTab.addEventListener('click', function (event) {
event.preventDefault(); // Prevent the default anchor behavior
showSignup();
});
loginTab.addEventListener('click', function (event) {
event.preventDefault(); // Prevent the default anchor behavior
showLogin();
});
// Show signup form by default on load
showSignup();
});
Download Source Code
This source code of the Simple Sign-Up/Login Form is available for downloading and there are no questions about copyrighting it. It is simple to setup and use and can be quickly modified to suit the task that you have at hand.
Conclusion
The Simple Sign-Up/Login Form can become a priceless resource for a website that engages the audience. You can use this code for your websites and gain additional benefits if you link back to JV Source Codes.
If you enjoyed this tutorial and want to know more coding tricks, do not forget to click the subscribe button on my channel.
