Modern Login Forms

Created by Aigars Silkalns for Colorlib

A curated collection of beautiful, responsive login form templates built with pure HTML, CSS, and JavaScript. Each form is designed to be completely self-contained and copy-paste ready for use in any project.

🌟 About Colorlib

Looking for more amazing form designs? Check out Colorlib's extensive collections:

• 📋 Login Forms Collection - Browse hundreds of login form designs
• 🎨 HTML5 & CSS3 Login Forms - Modern form templates and tutorials

🚀 Features

• Pure HTML/CSS/JS — no frameworks, no build step, no package manager
• Copy-paste ready — drop a single forms/<name>/ folder into any project
• Shared LoginFormBase class — every form inherits validation, lifecycle, and accessibility behavior from one place; per-form scripts average ~50 lines
• Responsive — mobile-first across all 20 designs
• Accessible by default — :focus-visible keyboard rings, prefers-reduced-motion honored globally, ARIA on icon controls, semantic markup
• SEO + social ready — meta description, Open Graph, Twitter card, and SVG favicon on every form
• No external dependencies — works fully offline, no CDN, no Google Fonts
• Cross-browser — Chrome 88+, Firefox 103+, Safari 15.4+, Edge 88+

🖼️ Form Gallery

Complete Collection - 19 Unique Login Forms

Glassmorphism Frosted glass effects Live Demo | Source	Neon Minimalist Dark theme with neon Live Demo | Source	Gradient Wave Animated gradients Live Demo | Source
Neumorphism Soft UI design Live Demo | Source	Corporate Professional Enterprise-grade Live Demo | Source	Material Design Google's Material UI Live Demo | Source
Basic Form Clean & simple Live Demo | Source	Minimal Clean Ultra-minimal design Live Demo | Source	Creative Portal Interactive animations Live Demo | Source
Eco Wellness Nature-inspired Live Demo | Source	AI Assistant Neural network theme Live Demo | Source	Neon Cyber Cyberpunk aesthetic Live Demo | Source
Soft Minimalism Warm & organic Live Demo | Source	Retro Future Y2K revival style Live Demo | Source	Minimal Music Spotify-inspired Live Demo | Source
Travel Booking Travel industry theme Live Demo | Source	Clean Banking Fintech design Live Demo | Source	Modern SaaS Stripe-inspired Live Demo | Source
Elegant Portfolio Creative professional Live Demo | Source	Brutalist Bold & minimal Live Demo | Source

📂 Forms by Category

🎨 Modern & Stylish

• Glassmorphism - Frosted glass effects with backdrop blur
• Neon Minimalist - Dark theme with glowing neon accents
• Gradient Wave - Dynamic gradient animations
• Neumorphism - Soft UI with realistic shadows

💼 Corporate & Clean

• Corporate Professional - Enterprise-grade with SSO integration
• Material Design - Google's Material Design principles
• Clean Banking - Fintech-inspired professional design
• Modern SaaS - Stripe-inspired minimal design

🎯 Minimal & Simple

• Basic Form - Simple, functional design for quick implementation
• Minimal Clean - Ultra-clean using system fonts
• Soft Minimalism - Warm minimalism with organic shapes
• Brutalist - Bold, raw aesthetic

🎨 Creative & Artistic

• Creative Portal - Interactive animations with floating shapes
• Retro Future - Y2K revival with chrome effects
• Elegant Portfolio - Dribbble-inspired creative design

🌟 Themed & Unique

• AI Assistant - Neural network-inspired design
• Eco Wellness - Nature-inspired with organic shapes
• Neon Cyber - Cyberpunk gaming aesthetic
• Minimal Music - Spotify-inspired clean design
• Travel Booking - Travel industry themed

🛠️ Quick Start

1. Browse & Choose

Open index.html in your browser to see all forms in action with live previews.

2. Copy Form Files

Each form is self-contained in its own directory:

forms/[form-name]/
├── index.html    # Form HTML structure
├── style.css     # Complete styling
├── script.js     # Form functionality
└── README.md     # Documentation

3. Include the shared utilities

Copy shared/js/form-utils.js alongside your form folder. It provides:

• FormUtils.LoginFormBase — the form lifecycle base class every form extends
• FormUtils.validateEmail / validatePassword — drop-in validators
• FormUtils.showNotification — XSS-safe toast (uses textContent, not innerHTML)
• FormUtils.setupFloatingLabels / setupPasswordToggle — common UI helpers

4. Customize

• Modify colors and styling in style.css
• Adjust the base class options in script.js (form-group selector, validators, elements to hide on success, etc.) — see any per-form script.js for examples (most are 30–80 lines)
• Update text and labels in index.html

Demo credentials

The included simulateLogin always succeeds except for one specific combination, used to demonstrate error states:

• email: admin@demo.com
• password: wrongpassword

📁 Project Structure

login-forms/
├── index.html                  # Main showcase page (gallery)
├── CHANGELOG.md                # Project history
├── shared/
│   └── js/
│       └── form-utils.js      # FormUtils helpers + LoginFormBase class
├── forms/                     # 20 self-contained form templates
│   ├── glassmorphism/
│   ├── neon/
│   ├── minimal/
│   └── ... (20 forms total)
├── assets/
│   └── screenshots/           # 1400px-wide PNG previews
└── docs/
    ├── design-guide.md
    └── screenshot-integration-guide.md

🎯 Form Features

Each form includes:

• ✅ Email and password inputs with validation
• ✅ Floating label animations
• ✅ Password visibility toggle
• ✅ Real-time validation feedback
• ✅ Loading and success states
• ✅ Responsive mobile-first design
• ✅ ARIA labels on icon controls + visible keyboard focus rings
• ✅ Honors prefers-reduced-motion
• ✅ Meta description, Open Graph image, Twitter card, and SVG favicon
• ✅ Remember me checkbox, forgot password and sign up links

🏛 Architecture

Every form is backed by FormUtils.LoginFormBase (in shared/js/form-utils.js). The base class owns the lifecycle:

class GlassmorphismLoginForm extends FormUtils.LoginFormBase {
    constructor() {
        super({
            hideOnSuccess: ['.divider', '.social-login', '.signup-link'],
            // optional: validators, formGroupSelector, cardSelector,
            // submitButtonSelector
        });
    }

    decorate() {
        // form-specific entrance animations or visual flourishes go here
    }
}

What the base class handles for you:

• form submit, validation, and field-level error display
• floating labels, password toggle, success state and reset
• forgot-password, sign-up, and social-login link defaults
• form-scoped keyboard shortcuts (no document-level leaks)
• shake/animation cleanup via animationend (no setTimeout races)

What you override per form:

• decorate() for entrance effects, particles, parallax, glitch, etc.
• onSuccess() if your form needs a custom success transition
• constructor options for selectors and validators that differ from the defaults

Per-form scripts ended up between 14 and 115 lines — down from 105 to 542 lines before the refactor.

🎨 Customization Guide

Colors & Theming

Each form uses CSS variables or inline styles that can be easily modified:

• Primary colors
• Background gradients
• Text colors
• Border styles

Form Validation

Validation rules in shared/js/form-utils.js:

• Email format validation
• Password strength requirements
• Custom error messages
• Success confirmations

Animations

• Entrance animations
• Hover effects
• Focus transitions
• Success celebrations

🔧 Technical Details

Browser Support

Browser	Version
Chrome	88+
Firefox	103+
Safari	15.4+
Edge	88+

Performance

• No external runtime dependencies — no CDN, no Google Fonts, no npm
• Screenshots stored at 1400px PNG (down from 3144px originals — 28 MB → 8.9 MB total)
• Lazy-loading on gallery images
• ~1,400 lines of JavaScript across all 20 forms (down from ~5,600 before the base-class refactor)

Accessibility

• Visible keyboard focus rings via :focus-visible (mouse users unaffected)
• Honors prefers-reduced-motion: reduce globally — animations collapse to ~0ms
• Semantic HTML, ARIA labels on icon-only controls, role="alert" / role="status" on toasts
• Form-scoped keyboard handlers (no document-level listener leaks)
• All inputs have autocomplete hints (email, current-password)

Security

• FormUtils.showNotification uses textContent instead of innerHTML — error messages from the auth backend cannot inject HTML
• No eval, no new Function, no inline event handlers anywhere

🤝 Contributing

We welcome contributions! Feel free to:

• Submit bug reports and feature requests
• Create new form designs following our guidelines
• Improve existing forms and documentation
• Share your customizations and use cases

📝 License

This project is created by Aigars Silkalns for Colorlib.

📜 Changelog

See CHANGELOG.md for a full history of releases — including the 2.0 refactor that introduced the shared LoginFormBase class, accessibility improvements, security fixes, and an 80%+ reduction in per-form JavaScript.

📞 Support & Resources

• 🌐 Visit Colorlib for more web design resources
• 📋 Browse Login Forms Collection
• 🎨 Explore HTML5 & CSS3 Login Forms
• 💻 Check out Aigars Silkalns' GitHub for other projects
• 🐛 Open an issue in this repository for bug reports

---

Built with ❤️ by Aigars Silkalns for Colorlib