Login Templates
HTML Login Form Templates
Collection of responsive HTML login form templates with modern designs. Find secure, user-friendly login page templates with complete code samples.
Basic Login Form
A clean and simple login form with email and password fields, perfect for basic authentication needs.
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-6">Login</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" name="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="flex items-center">
<input type="checkbox" name="remember" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label class="ml-2 block text-sm text-gray-700">Remember me</label>
</div>
<button type="submit" class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-sm">Sign In</button>
</div>
<div class="mt-4 flex items-center justify-between text-sm">
<a href="#" class="text-blue-600 hover:underline">Forgot Password?</a>
<a href="#" class="text-blue-600 hover:underline">Create Account</a>
</div>
</form>Colors
Typography
Social Login Form
Modern login form with social authentication options, featuring Google and GitHub sign-in buttons.
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-6">Welcome Back</h2>
<div class="space-y-4">
<button type="button" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
<svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
</svg>
Continue with Google
</button>
<button type="button" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.24.73-.53v-1.85c-3.03.66-3.67-1.45-3.67-1.45-.5-1.27-1.21-1.6-1.21-1.6-.98-.67.08-.66.08-.66 1.09.08 1.66 1.12 1.66 1.12.96 1.65 2.53 1.17 3.15.89.1-.7.38-1.17.69-1.44-2.42-.28-4.96-1.21-4.96-5.4 0-1.19.42-2.17 1.12-2.93-.11-.28-.49-1.39.11-2.89 0 0 .92-.3 3 1.12a10.5 10.5 0 015.52 0c2.08-1.42 3-1.12 3-1.12.6 1.5.22 2.61.11 2.89.7.76 1.12 1.74 1.12 2.93 0 4.2-2.55 5.12-4.98 5.39.39.34.74 1.01.74 2.03v3.01c0 .29.19.63.74.53A11 11 0 0012 1.27"/>
</svg>
Continue with GitHub
</button>
</div>
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">or</span>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" name="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<button type="submit" class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-sm">Sign In</button>
</div>
</form>Colors
Typography
Minimal Login Form
A minimalist login form with clean lines and subtle animations, perfect for modern web applications.
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-sm mx-auto p-6">
<div class="space-y-6">
<div>
<input type="email" name="email" placeholder="Email" required class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none transition-colors">
</div>
<div>
<input type="password" name="password" placeholder="Password" required class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none transition-colors">
</div>
<button type="submit" class="w-full py-2 bg-transparent border-2 border-blue-600 text-blue-600 font-medium rounded-full hover:bg-blue-50 transition-colors">Login</button>
</div>
</form>Colors
Typography
Card Style Login Form
An elegant card-based login form with a user icon and well-organized layout.
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-md mx-auto p-8 bg-white rounded-xl shadow-lg">
<div class="flex justify-center mb-8">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
</div>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" name="email" required class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" name="password" required class="w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div class="flex items-center justify-between">
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="ml-2 text-sm text-gray-600">Remember me</span>
</label>
<a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Sign in to account</button>
</div>
</form>Colors
Typography
Split Screen Login Form
A modern split-screen login design with an informative sidebar, perfect for marketing-focused login pages.
Welcome Back!
Sign in to access your account and continue your journey with us.
Secure and encrypted
Lightning fast experience
Bank-grade security
<div class="flex min-h-[600px] bg-white rounded-xl shadow-lg overflow-hidden">
<div class="hidden md:block md:w-1/2 bg-blue-600 p-12 text-white">
<h2 class="text-3xl font-bold mb-6">Welcome Back!</h2>
<p class="text-blue-100 mb-6">Sign in to access your account and continue your journey with us.</p>
<div class="mt-12">
<div class="flex items-center mb-4">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Secure and encrypted</span>
</div>
<div class="flex items-center mb-4">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span>Lightning fast experience</span>
</div>
<div class="flex items-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<span>Bank-grade security</span>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-12">
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-sm mx-auto">
<h2 class="text-3xl font-bold text-gray-900 mb-8">Sign In</h2>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" name="password" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div class="flex items-center justify-between">
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="ml-2 text-sm text-gray-600">Remember me</span>
</label>
<a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Sign in to account</button>
<p class="text-center text-sm text-gray-600">
Don't have an account?
<a href="#" class="text-blue-600 hover:underline">Sign up</a>
</p>
</div>
</form>
</div>
</div>Colors
Typography
Ready to use login templates?
Get started with FormSubmit - no backend required!