🎉 This website is going for sale. Contact us for details. Contact Now

Modern Registration & Login Form

15 min read

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:  

  1. Elegant transitions between login and registration  
  2. Mobile-friendly layout for all devices  
  3. Social login options (Google, Facebook, Apple)  
  4. Password visibility toggle for better usability  
  5. Real-time password strength checker  

✨ Key Features

  • Dual Form Functionality

  1. Toggle between Login and Registration with a smooth sliding animation.  
  2. Clean UI with clear CTAs (Call-to-Action buttons).  

  • Responsive & Mobile-Friendly  

  1. Adapts perfectly to desktops, tablets, and smartphones.  
  2. Stacked layout on smaller screens for better readability.  

  • Enhanced Security & Validation  

  1. Password strength meter (Weak/Medium/Strong) with color feedback.  
  2. Confirm password matching check.  
  3. Basic client-side validation for required fields.  

  • User-Friendly Interactions 

  1. Toggle password visibility with an eye icon.  
  2. Social login integration (Google, Facebook, Apple).  
  3. Loading animation during form submission.  

  • Modern UI/UX Design

  1. Sleek gradient background for the toggle panel.  
  2. Card-based layout with subtle shadows.  
  3. Animated transitions for a polished feel.  
  4. Custom form styling with hover & focus effects.  

  • Easy Integration

  1. Pure HTML, CSS, and JavaScript (no external dependencies except Font Awesome for icons).  
  2. Well-structured code for easy customization.  

🚀 Perfect For:

  1. SaaS platforms 
  2. E-commerce sites  
  3. Mobile/web applications 
  4. Admin dashboards
  5. 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>
               
               
               
               
               
               
2 comments
Search
Menu
Theme
Share

Bengali New Year

On this day, colored by the traditions of many eras,
May all differences dissolve, soul to soul.
With warm wishes and love for the Bengali New Year,
May Bengal's progress triumph with renewed hope.