UNIT 22 • STAGE 6 OF 7
The Form
Multi-step form HTML and CSS with step indicator dots
What a Multi-Step Form Is
A multi-step form breaks a long registration process into smaller pieces. Instead of showing twenty fields at once (which is overwhelming), you show three fields on step one, get the user to click Next, then show three more. By the time they hit Submit they have barely noticed how much they filled out.
The pattern works like this in HTML: three <div class="form-step"> elements all exist on the page at once. In Stage 6, you will add the HTML and CSS but all three steps will be visible — you will see all the fields stacked. In Stage 7, you add JavaScript to hide steps 2 and 3 by default and show them only when the user clicks Next.
This stage focuses on making the form look professional. You will style inputs, labels, and buttons so the form feels like something from a real website.
Add the Form CSS
Add this after the vendors section CSS:
#register .section-label { color: rgba(255,255,255,0.5); }
#register .section-heading { color: white; }
.form-card {
background: white;
border-radius: 20px;
padding: 40px;
max-width: 600px;
}
.step-indicators {
display: flex;
gap: 8px;
margin-bottom: 32px;
}
.step-dot {
width: 32px;
height: 8px;
background: #e5e7eb;
border-radius: 100px;
transition: background 0.2s;
}
.step-dot.active { background: var(--teal); }
.step-dot.done { background: var(--teal); opacity: 0.4; }
.form-step-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; text-transform: uppercase; margin-bottom: 24px; color: var(--deep); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; font-size: 0.875rem; color: var(--deep); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 12px 14px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-family: var(--font-body);
font-size: 1rem;
color: var(--deep);
transition: border-color 0.2s;
outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--teal); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-btn-row { display: flex; gap: 12px; margin-top: 28px; }
.btn-next, .btn-submit { background: var(--teal); color: white; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; border: none; padding: 14px 32px; border-radius: 8px; cursor: pointer; text-transform: uppercase; }
.btn-back { background: transparent; color: var(--teal); font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; border: 2px solid var(--teal); padding: 14px 32px; border-radius: 8px; cursor: pointer; text-transform: uppercase; }
.confirm-message { text-align: center; padding: 16px 0; }
.confirm-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.confirm-message h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.confirm-message p { color: #6b7280; line-height: 1.6; }
The .step-dot elements are purely decorative at this stage — three narrow pill shapes that show which step is active. When you add JavaScript in Stage 7, the dots will update dynamically as the user moves between steps. Right now they are just CSS shapes.
Add the Register Section HTML
Add this after the vendors section. All three form steps are visible in the preview because there is no JavaScript yet. That is expected. You will hide and show them in Stage 7.
<div class="container">
<p class="section-label">Sign Up</p>
<h2 class="section-heading">Register to Participate</h2>
<div class="form-card">
<div class="step-indicators">
<div class="step-dot active" id="dot-1"></div>
<div class="step-dot" id="dot-2"></div>
<div class="step-dot" id="dot-3"></div>
</div>
<div class="form-step" id="step-1">
<p class="form-step-title">Step 1: Your Information</p>
<div class="form-group"><label for="name">Full Name</label><input type="text" id="name" placeholder="Your full name"></div>
<div class="form-group"><label for="email">Email Address</label><input type="email" id="email" placeholder="your@email.com"></div>
<div class="form-group"><label for="nation">Tribal Nation / Affiliation</label><input type="text" id="nation" placeholder="Your Tribal nation or affiliation"></div>
<div class="form-btn-row"><button class="btn-next" id="next-1">Next →</button></div>
</div>
<div class="form-step" id="step-2">
<p class="form-step-title">Step 2: Participation</p>
<div class="form-group">
<label for="role">I am registering as a</label>
<select id="role">
<option>Select a role</option>
<option>Dancer</option>
<option>Drum Group</option>
<option>Vendor</option>
<option>Volunteer</option>
</select>
</div>
<div class="form-group"><label for="category">Dance Category (if dancer)</label>
<select id="category"><option>Not applicable</option><option>Men's Traditional</option><option>Grass Dance</option><option>Men's Fancy</option><option>Women's Traditional</option><option>Jingle Dress</option><option>Women's Fancy Shawl</option></select></div>
<div class="form-group"><label for="notes">Additional Notes</label><textarea id="notes" placeholder="Any questions or special requirements?"></textarea></div>
<div class="form-btn-row"><button class="btn-back" id="back-2">← Back</button><button class="btn-submit" id="submit-btn">Submit</button></div>
</div>
<div class="form-step" id="step-3">
<div class="confirm-message">
<span class="confirm-icon">🥁</span>
<h3>You're Registered</h3>
<p>Thank you for registering for the Mille Lacs Band Powwow 2026. A confirmation email has been sent to the address you provided. We look forward to seeing you at the powwow.</p>
</div>
</div>
</div>
</div>
</section>
All three steps are visible right now
That is correct. You will see Step 1, Step 2, and the confirmation message all stacked on top of each other in the preview. In Stage 7, you will add JavaScript that hides steps 2 and 3 on page load, and makes them appear only when the user clicks Next. For now, focus on making the form look right.
Stage 6 Complete
The registration form is now styled and structured. You have two real steps of fields and a confirmation message, plus step indicator dots, teal-bordered inputs with focus styles, and properly styled Next, Back, and Submit buttons.
Next: Stage 7 adds the JavaScript that makes it actually work as a multi-step form.
© 2026 Relentless Feather. All rights reserved.