- No data uploaded
- Instant results
Bootstrap 5 Signup Form for Vanilla JS — Glassmorphism
A production-ready glassmorphism signup form: a registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vanilla JS code update instantly in your browser.
Live component editor
Live preview
<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<div class="w-100 mw-md p-5 glass shadow-lg rounded-3">
<span class="badge rounded-pill bg-brand-subtle text-brand">Free 14-day trial</span>
<h2 class="mt-2 fs-4 fw-bold text-body-emphasis">Create your account</h2>
<p class="mt-1 mb-4 small text-body-secondary">No credit card required.</p>
<form class="d-flex flex-column gap-3">
<div class="row row-cols-2 g-2">
<div class="col">
<label for="su-first" class="form-label small fw-medium">First name</label>
<input id="su-first" type="text" autocomplete="given-name" class="form-control rounded-2" required>
</div>
<div class="col">
<label for="su-last" class="form-label small fw-medium">Last name</label>
<input id="su-last" type="text" autocomplete="family-name" class="form-control rounded-2" required>
</div>
</div>
<div>
<label for="su-email" class="form-label small fw-medium">Work email</label>
<input id="su-email" type="email" autocomplete="email" placeholder="you@company.com" class="form-control rounded-2" required>
</div>
<div>
<label for="su-password" class="form-label small fw-medium">Password</label>
<input id="su-password" type="password" autocomplete="new-password" aria-describedby="su-hint" class="form-control rounded-2" required>
<p id="su-hint" class="mt-1 small text-body-secondary">At least 12 characters, including a number.</p>
</div>
<label class="d-flex align-items-start gap-2 small text-body">
<input type="checkbox" class="form-check-input mt-0 mt-1" required>
<span>I agree to the <a href="#" class="text-brand fw-medium text-decoration-none">Terms</a> and <a href="#" class="text-brand fw-medium text-decoration-none">Privacy Policy</a>.</span>
</label>
<button type="submit" class="btn btn-brand fw-semibold rounded-2 w-100">Create account</button>
</form>
<p class="mt-4 text-center small text-body-secondary">Already registered? <a href="#" class="text-brand fw-medium text-decoration-none">Sign in</a></p>
</div>
/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
--bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
--bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
--bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }
.glass { background: rgba(255, 255, 255, .6) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .6) !important; }
[data-bs-theme="dark"] .glass, [data-bs-theme="dark"].glass { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .1) !important; }
.bg-glass-page { background: linear-gradient(135deg, #e0e7ff, #f0f9ff, #ffe4e6); }
[data-bs-theme="dark"] .bg-glass-page, [data-bs-theme="dark"].bg-glass-page { background: linear-gradient(135deg, #020617, #1e1b4b, #0f172a); }
More Bootstrap components for Vanilla JS
All components →- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Razorpay Checkout Form A two-column checkout with an order summary (subtotal, GST, total in INR), contact fields, a UPI / card / netbanking selector and a pay button that opens Razorpay Checkout
- FAQ Accordion A frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded
- Cookie Consent Banner A GDPR-style cookie banner with equally prominent “Accept all” and “Reject all”, granular analytics/marketing toggles (off by default), stored consent and Google Consent Mode v2 signals
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
- Hero Section A landing-page hero with an announcement badge, a large headline, supporting copy, primary and secondary calls to action and a row of social-proof stats
- Contact Form A contact card with name, email, a topic selector, a message textarea and a submit button
Install Bootstrap 5 for Vanilla JS
Include Bootstrap 5.3 from the CDN (or npm install bootstrap) and the generated theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css">Use the signup form in Vanilla JS
Paste the markup where the component should appear. It is pure HTML/CSS — no JavaScript required.
Accessibility & customization
Inputs are paired with <label for> and the password hint is linked via aria-describedby so screen readers announce the requirement. The terms checkbox is a real <input type="checkbox"> inside its label for a large click target.
Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Bootstrap 5.3+ (CSS only) |
| Library | Plain HTML + optional vanilla JS |
| Interactive state | None (static markup) |
| Dark mode | Yes — toggle in the editor |
| Style | Glassmorphism (backdrop blur) |
Frequently asked questions
How do I install this Bootstrap signup form in Vanilla JS?
Create a web page, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the signup form?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the signup form support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the signup form accessible?
Inputs are paired with <label for> and the password hint is linked via aria-describedby so screen readers announce the requirement. The terms checkbox is a real <input type="checkbox"> inside its label for a large click target.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.