Tools / UI Kit / Bootstrap / Forms

Forms

Login, signup, contact, and multi-step forms.

Login Form
Welcome back

Sign in to your account

<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
Create account

Get started in seconds

<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>