gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
109 lines (99 loc) • 6.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form wizard | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main-v4.js"></script>
</head>
<body data-shell="admin" data-page="form-wizards" data-breadcrumb="Home > Forms > Wizard">
<main class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Forms</div>
<h1 class="page-title">Onboarding wizard</h1>
</div>
</div>
</div>
<div class="row col-1">
<div class="card">
<div class="wizard-steps" id="steps">
<div class="wizard-step active" data-step="0"><div class="num">1</div><div><div class="label">Account</div><div class="sub">Basic details</div></div></div>
<div class="wizard-step" data-step="1"><div class="num">2</div><div><div class="label">Workspace</div><div class="sub">Team & plan</div></div></div>
<div class="wizard-step" data-step="2"><div class="num">3</div><div><div class="label">Invite</div><div class="sub">Add teammates</div></div></div>
<div class="wizard-step" data-step="3"><div class="num">4</div><div><div class="label">Confirm</div><div class="sub">Review & finish</div></div></div>
</div>
<div class="wizard-panel active" data-panel="0">
<div class="form-row">
<div class="form-group"><label class="form-label">First name</label><input class="form-control" aria-label="First name"></div>
<div class="form-group"><label class="form-label">Last name</label><input class="form-control" aria-label="Last name"></div>
</div>
<div class="form-group"><label class="form-label">Email</label><input class="form-control" type="email" placeholder="you@company.com" aria-label="Email"></div>
<div class="form-group"><label class="form-label">Password</label><input class="form-control" type="password" placeholder="Min 8 characters" aria-label="Password"></div>
</div>
<div class="wizard-panel" data-panel="1">
<div class="form-group"><label class="form-label">Workspace name</label><input class="form-control" placeholder="e.g. Acme Corp" aria-label="Workspace name"></div>
<div class="form-group"><label class="form-label">Plan</label>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
<label class="form-check" style="border:1px solid var(--border-color);padding:12px;border-radius:var(--radius-sm)"><input type="radio" name="plan"> <span><strong>Starter</strong><br><span style="color:var(--text-muted);font-size:11.5px">$0/mo</span></span></label>
<label class="form-check" style="border:1px solid var(--primary);padding:12px;border-radius:var(--radius-sm);background:var(--primary-lt)"><input type="radio" name="plan" checked> <span><strong>Pro</strong><br><span style="color:var(--text-muted);font-size:11.5px">$29/user/mo</span></span></label>
<label class="form-check" style="border:1px solid var(--border-color);padding:12px;border-radius:var(--radius-sm)"><input type="radio" name="plan"> <span><strong>Business</strong><br><span style="color:var(--text-muted);font-size:11.5px">$79/user/mo</span></span></label>
</div>
</div>
</div>
<div class="wizard-panel" data-panel="2">
<div class="form-group"><label class="form-label">Invite by email (one per line)</label>
<textarea class="form-control" rows="6" placeholder="sarah@company.com michael@company.com" aria-label="Team member emails"></textarea>
</div>
<div class="form-help">You can also skip and invite teammates later from settings.</div>
</div>
<div class="wizard-panel" data-panel="3">
<div class="alert alert-success">
<svg class="alert-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M5 8l2 2 4-4"/></svg>
<div class="alert-body"><strong>You're all set.</strong> Click finish to create your workspace.</div>
</div>
<ul style="font-size:13px;color:var(--text-secondary);line-height:1.8;padding-left:20px">
<li>Account · <strong>aigars@colorlib.com</strong></li>
<li>Workspace · <strong>Colorlib</strong> on Pro plan</li>
<li>Invites · <strong>2 teammates</strong></li>
</ul>
</div>
<div class="form-actions" style="padding:12px 20px;border-top:1px solid var(--border-color-light);margin:0">
<button class="btn btn-outline" id="prev-btn" disabled style="opacity:.5">← Back</button>
<div style="margin-left:auto;display:flex;gap:6px">
<button class="btn btn-outline">Save & exit</button>
<button class="btn btn-primary" id="next-btn">Next →</button>
</div>
</div>
</div>
</div>
</div>
</main>
<script type="module">
let step = 0;
const total = 4;
const next = document.getElementById('next-btn');
const prev = document.getElementById('prev-btn');
const stepsEls = document.querySelectorAll('.wizard-step');
const panelsEls = document.querySelectorAll('.wizard-panel');
function render() {
stepsEls.forEach((el, i) => {
el.classList.toggle('active', i === step);
el.classList.toggle('done', i < step);
});
panelsEls.forEach((el, i) => el.classList.toggle('active', i === step));
prev.disabled = step === 0;
prev.style.opacity = step === 0 ? '.5' : '1';
next.textContent = step === total - 1 ? 'Finish' : 'Next →';
}
next.addEventListener('click', () => { if (step < total - 1) { step++; render(); } });
prev.addEventListener('click', () => { if (step > 0) { step--; render(); } });
</script>
</body>
</html>