Forms
Login, signup, contact, and multi-step forms.
Login Form
<form class="card p-4" style="max-width: 380px;">
<h5 class="mb-1">Welcome back</h5>
<p class="text-muted small mb-3">Sign in to your account</p>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="[email protected]">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="••••••••">
</div>
<button type="submit" class="btn btn-primary w-100">Sign In</button>
</form>
Signup Form
<form class="card p-4" style="max-width: 380px;">
<h5 class="mb-1">Create account</h5>
<p class="text-muted small mb-3">Get started in seconds</p>
<div class="mb-3">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" placeholder="John Doe">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="[email protected]">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Min 8 characters">
</div>
<button type="submit" class="btn btn-primary w-100">Create Account</button>
</form>
Contact Form
<form class="card p-4" style="max-width: 500px;">
<div class="row g-3 mb-3">
<div class="col-6"><input type="text" class="form-control" placeholder="Name"></div>
<div class="col-6"><input type="email" class="form-control" placeholder="Email"></div>
</div>
<input type="text" class="form-control mb-3" placeholder="Subject">
<textarea rows="4" class="form-control mb-3" placeholder="Your message..."></textarea>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>