This stylish and responsive registration/login form provides a seamless user experience with smooth animations, intuitive validation, and a clean, modern design. It allows users to easily switch between sign-up and sign-in modes while ensuring secure password creation with real-time strength feedback.
Perfect for websites, web apps, and dashboards, this form enhances user interaction with:
- Elegant transitions between login and registration
- Mobile-friendly layout for all devices
- Social login options (Google, Facebook, Apple)
- Password visibility toggle for better usability
- Real-time password strength checker
✨ Key Features
- Dual Form Functionality
- Toggle between Login and Registration with a smooth sliding animation.
- Clean UI with clear CTAs (Call-to-Action buttons).
- Responsive & Mobile-Friendly
- Adapts perfectly to desktops, tablets, and smartphones.
- Stacked layout on smaller screens for better readability.
- Enhanced Security & Validation
- Password strength meter (Weak/Medium/Strong) with color feedback.
- Confirm password matching check.
- Basic client-side validation for required fields.
- User-Friendly Interactions
- Toggle password visibility with an eye icon.
- Social login integration (Google, Facebook, Apple).
- Loading animation during form submission.
- Modern UI/UX Design
- Sleek gradient background for the toggle panel.
- Card-based layout with subtle shadows.
- Animated transitions for a polished feel.
- Custom form styling with hover & focus effects.
- Easy Integration
- Pure HTML, CSS, and JavaScript (no external dependencies except Font Awesome for icons).
- Well-structured code for easy customization.
🚀 Perfect For:
- SaaS platforms
- E-commerce sites
- Mobile/web applications
- Admin dashboards
- Membership portals
This form balances aesthetics and functionality, ensuring a smooth onboarding experience for users while maintaining security and responsiveness. 🎨💻
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Auth Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #4361ee;
--primary-dark: #3a0ca3;
--secondary: #f72585;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--success: #4cc9f0;
--warning: #f8961e;
--danger: #ef233c;
--radius: 12px;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: var(--dark);
line-height: 1.6;
}
.auth-container {
position: relative;
width: 100%;
max-width: 1000px;
height: auto;
min-height: 600px;
background: white;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
}
.form-container {
flex: 1;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
transition: var(--transition);
position: relative;
z-index: 2;
}
.sign-in-container {
background: white;
}
.sign-up-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transform: translateX(100%);
background: white;
}
.auth-container.active .sign-in-container {
transform: translateX(-100%);
opacity: 0;
}
.auth-container.active .sign-up-container {
transform: translateX(0);
opacity: 1;
z-index: 5;
}
.form-header {
margin-bottom: 40px;
text-align: center;
}
.form-header h1 {
font-size: 2.2rem;
color: var(--primary);
margin-bottom: 10px;
font-weight: 700;
}
.form-header p {
color: var(--gray);
font-size: 0.95rem;
}
.social-auth {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}
.social-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
text-decoration: none;
transition: var(--transition);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.social-btn:hover {
transform: translateY(-3px);
}
.social-btn.google {
background: #db4437;
}
.social-btn.facebook {
background: #4267b2;
}
.social-btn.apple {
background: #000;
}
.divider {
display: flex;
align-items: center;
margin: 25px 0;
color: var(--gray);
font-size: 0.85rem;
}
.divider::before, .divider::after {
content: "";
flex: 1;
height: 1px;
background: #e0e0e0;
margin: 0 10px;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 0.9rem;
color: var(--dark);
font-weight: 500;
}
.form-control {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: var(--radius);
font-size: 1rem;
transition: var(--transition);
background: #f8f9fa;
}
.form-control:focus {
border-color: var(--primary);
background: white;
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
outline: none;
}
.password-toggle {
position: absolute;
right: 15px;
top: 42px;
cursor: pointer;
color: var(--gray);
}
.btn {
display: inline-block;
width: 100%;
padding: 15px;
border-radius: var(--radius);
font-size: 1rem;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: var(--transition);
border: none;
margin-top: 10px;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(67, 97, 238, 0.5);
}
.btn-ghost {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-ghost:hover {
background: rgba(67, 97, 238, 0.1);
}
.form-footer {
text-align: center;
margin-top: 25px;
font-size: 0.9rem;
color: var(--gray);
}
.form-footer a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.form-footer a:hover {
text-decoration: underline;
}
.toggle-container {
flex: 1;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
position: relative;
overflow: hidden;
transition: var(--transition);
}
.toggle-panel {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 50px;
text-align: center;
transition: var(--transition);
}
.toggle-left {
transform: translateX(-100%);
}
.toggle-right {
transform: translateX(0);
}
.auth-container.active .toggle-left {
transform: translateX(0);
}
.auth-container.active .toggle-right {
transform: translateX(100%);
}
.toggle-panel h1 {
font-size: 2.2rem;
margin-bottom: 20px;
}
.toggle-panel p {
margin-bottom: 30px;
font-size: 0.95rem;
line-height: 1.7;
}
.illustration {
width: 80%;
max-width: 300px;
margin-bottom: 30px;
}
/* Responsive styles */
@media (max-width: 768px) {
.auth-container {
flex-direction: column;
min-height: auto;
}
.form-container {
padding: 40px 30px;
}
.toggle-container {
display: none;
}
.sign-up-container {
position: relative;
transform: translateX(0);
opacity: 0;
height: 0;
overflow: hidden;
}
.auth-container.active .sign-up-container {
height: auto;
opacity: 1;
}
.auth-container.active .sign-in-container {
display: none;
}
.form-header h1 {
font-size: 1.8rem;
}
.toggle-panel {
padding: 0 30px;
}
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.form-container > * {
animation: fadeIn 0.6s ease-out forwards;
}
/* Password strength indicator */
.password-strength {
height: 4px;
background: #e9ecef;
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.strength-bar {
height: 100%;
width: 0;
transition: var(--transition);
}
.strength-weak {
background: var(--danger);
width: 33%;
}
.strength-medium {
background: var(--warning);
width: 66%;
}
.strength-strong {
background: var(--success);
width: 100%;
}
.strength-text {
font-size: 0.75rem;
margin-top: 4px;
text-align: right;
color: var(--gray);
}
</style>
</head>
<body>
<div class="auth-container" id="authContainer">
<!-- Sign In Form -->
<div class="form-container sign-in-container">
<form id="loginForm">
<div class="form-header">
<h1>Welcome Back</h1>
<p>Sign in to access your account</p>
</div>
<div class="social-auth">
<a href="#" class="social-btn google" title="Sign in with Google">
<i class="fab fa-google"></i>
</a>
<a href="#" class="social-btn facebook" title="Sign in with Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-btn apple" title="Sign in with Apple">
<i class="fab fa-apple"></i>
</a>
</div>
<div class="divider">or use email</div>
<div class="form-group">
<label for="loginEmail">Email Address</label>
<input type="email" id="loginEmail" class="form-control" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" class="form-control" placeholder="Enter your password" required>
<i class="fas fa-eye password-toggle" id="toggleLoginPassword"></i>
</div>
<div class="form-group" style="text-align: right;">
<a href="#" style="font-size: 0.85rem; color: var(--primary); text-decoration: none;">Forgot password?</a>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
<div class="form-footer">
Don't have an account? <a href="#" id="showSignUp">Sign Up</a>
</div>
</form>
</div>
<!-- Sign Up Form -->
<div class="form-container sign-up-container">
<form id="registerForm">
<div class="form-header">
<h1>Create Account</h1>
<p>Join us today and get started</p>
</div>
<div class="social-auth">
<a href="#" class="social-btn google" title="Sign up with Google">
<i class="fab fa-google"></i>
</a>
<a href="#" class="social-btn facebook" title="Sign up with Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-btn apple" title="Sign up with Apple">
<i class="fab fa-apple"></i>
</a>
</div>
<div class="divider">or use email</div>
<div class="form-group">
<label for="registerName">Full Name</label>
<input type="text" id="registerName" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="registerEmail">Email Address</label>
<input type="email" id="registerEmail" class="form-control" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="registerPassword">Password</label>
<input type="password" id="registerPassword" class="form-control" placeholder="Create a password" required>
<i class="fas fa-eye password-toggle" id="toggleRegisterPassword"></i>
<div class="password-strength">
<div class="strength-bar" id="passwordStrengthBar"></div>
</div>
<div class="strength-text" id="passwordStrengthText">Password strength</div>
</div>
<div class="form-group">
<label for="registerConfirmPassword">Confirm Password</label>
<input type="password" id="registerConfirmPassword" class="form-control" placeholder="Confirm your password" required>
<i class="fas fa-eye password-toggle" id="toggleRegisterConfirmPassword"></i>
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
<div class="form-footer">
Already have an account? <a href="#" id="showSignIn">Sign In</a>
</div>
</form>
</div>
<!-- Toggle Panel -->
<div class="toggle-container">
<div class="toggle-panel toggle-left">
<img src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" alt="Welcome" class="illustration">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start your journey with us</p>
<button class="btn btn-ghost" id="register">Sign Up</button>
</div>
<div class="toggle-panel toggle-right">
<img src="https://cdn-icons-png.flaticon.com/512/5087/5087579.png" alt="Welcome back" class="illustration">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="btn btn-ghost" id="login">Sign In</button>
</div>
</div>
</div>
<script>
// DOM Elements
const authContainer = document.getElementById('authContainer');
const showSignUp = document.getElementById('showSignUp');
const showSignIn = document.getElementById('showSignIn');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const toggleLoginPassword = document.getElementById('toggleLoginPassword');
const toggleRegisterPassword = document.getElementById('toggleRegisterPassword');
const toggleRegisterConfirmPassword = document.getElementById('toggleRegisterConfirmPassword');
const passwordStrengthBar = document.getElementById('passwordStrengthBar');
const passwordStrengthText = document.getElementById('passwordStrengthText');
const registerPassword = document.getElementById('registerPassword');
// Toggle between forms
showSignUp.addEventListener('click', (e) => {
e.preventDefault();
authContainer.classList.add('active');
});
showSignIn.addEventListener('click', (e) => {
e.preventDefault();
authContainer.classList.remove('active');
});
registerBtn.addEventListener('click', () => {
authContainer.classList.add('active');
});
loginBtn.addEventListener('click', () => {
authContainer.classList.remove('active');
});
// Password visibility toggle
function togglePasswordVisibility(inputId, icon) {
const input = document.getElementById(inputId);
if (input.type === 'password') {
input.type = 'text';
icon.classList.replace('fa-eye', 'fa-eye-slash');
} else {
input.type = 'password';
icon.classList.replace('fa-eye-slash', 'fa-eye');
}
}
toggleLoginPassword.addEventListener('click', () => {
togglePasswordVisibility('loginPassword', toggleLoginPassword);
});
toggleRegisterPassword.addEventListener('click', () => {
togglePasswordVisibility('registerPassword', toggleRegisterPassword);
});
toggleRegisterConfirmPassword.addEventListener('click', () => {
togglePasswordVisibility('registerConfirmPassword', toggleRegisterConfirmPassword);
});
// Password strength indicator
registerPassword.addEventListener('input', function() {
const password = this.value;
let strength = 0;
// Check password length
if (password.length >= 8) strength += 1;
// Check for mixed case
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1;
// Check for numbers
if (password.match(/([0-9])/)) strength += 1;
// Check for special chars
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
// Update strength indicator
switch(strength) {
case 0:
case 1:
passwordStrengthBar.className = 'strength-bar strength-weak';
passwordStrengthText.textContent = 'Weak';
passwordStrengthText.style.color = 'var(--danger)';
break;
case 2:
passwordStrengthBar.className = 'strength-bar strength-medium';
passwordStrengthText.textContent = 'Medium';
passwordStrengthText.style.color = 'var(--warning)';
break;
case 3:
case 4:
passwordStrengthBar.className = 'strength-bar strength-strong';
passwordStrengthText.textContent = 'Strong';
passwordStrengthText.style.color = 'var(--success)';
break;
}
});
// Form validation and submission
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
if (!email || !password) {
alert('Please fill in all fields');
return;
}
// Simulate login process
showLoading(true);
setTimeout(() => {
showLoading(false);
alert('Login successful! (This is a demo)');
this.reset();
}, 1500);
});
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('registerName').value;
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
const confirmPassword = document.getElementById('registerConfirmPassword').value;
if (!name || !email || !password || !confirmPassword) {
alert('Please fill in all fields');
return;
}
if (password !== confirmPassword) {
alert('Passwords do not match');
return;
}
if (password.length < 8) {
alert('Password should be at least 8 characters');
return;
}
// Simulate registration process
showLoading(true);
setTimeout(() => {
showLoading(false);
alert('Registration successful! (This is a demo)');
this.reset();
authContainer.classList.remove('active');
passwordStrengthBar.className = 'strength-bar';
passwordStrengthText.textContent = 'Password strength';
passwordStrengthText.style.color = 'var(--gray)';
}, 1500);
});
// Loading state
function showLoading(show) {
const buttons = document.querySelectorAll('.btn-primary');
buttons.forEach(button => {
if (show) {
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
button.disabled = true;
} else {
if (button.closest('#loginForm')) {
button.textContent = 'Sign In';
} else {
button.textContent = 'Sign Up';
}
button.disabled = false;
}
});
}
// Responsive check
function checkScreenSize() {
if (window.innerWidth <= 768) {
authContainer.classList.remove('active');
}
}
window.addEventListener('resize', checkScreenSize);
checkScreenSize();
</script>
</body>
</html>
