16 CSS Multi-Step Form UI

Conversion research from Baymard Institute, Nielsen Norman Group and Stripe's own checkout benchmarks converges on a short list of high-signal patterns. First, break the form into 3 to 5 short steps rather than 6 or more — Baymard's 2024 checkout study across 500+ US and EU carts shows drop-off climbs sharply past step 5. Second, surface a segmented progress bar with numbered step labels at the top so shoppers can preview the commitment before they start (the E-commerce Checkout, Insurance Quote and Moving Quote demos all model this). Third, keep the first step frictionless — a single input like an email, ZIP code or vehicle year lets the user commit before the form asks for a phone number or SSN. Fourth, validate field-by-field on blur rather than only on submit, and never advance the step until the current step is valid — the Loan Application demo runs strict per-step validation with visible error copy anchored under the field. Fifth, save progress on every step change so a page refresh or a mobile-to-desktop switch does not wipe the entry — the University Admission demo demonstrates the save-progress pattern with a persistence-ready structure. All 16 demos ship semantic form and fieldset markup so browser autofill, password managers (1Password, iCloud Keychain, Bitwarden) and screen readers engage without extra wiring. Ad CPMs on e-commerce checkout content in tier-1 markets run 8-15 USD, SaaS onboarding 10-20 USD, and mortgage or insurance application content 25-80 USD — so a rebrandable copy-paste template pays for itself on organic traffic alone.

The Mortgage and Home Loan Application demo is the copy-paste UI shell for a TILA-compliant intake flow. Concretely: step 1 collects the purchase price, down payment and ZIP code with a range slider for down payment percentage and a radio-card selector for property type (primary residence, second home, investment); step 2 collects credit tier and employment status without asking for full SSN at the UI layer; step 3 shows an estimated monthly payment and APR range so the applicant sees a Truth in Lending Act 15 USC 1601 disclosure before submitting anything binding. TILA Regulation Z 12 CFR 1026.18 requires the APR, finance charge, amount financed and total-of-payments to appear together in a conspicuous format — the demo carries a compliance panel with a rebrandable --disclosure accent that hosts this block. The Consumer Financial Protection Bureau's Know Before You Owe guidance and the updated 2024 LO Compensation rule are backend concerns, but the UI shell already models the disclosure hierarchy. Wiring it to Blend, LendingPad, Ellie Mae Encompass, Rocket Mortgage's API or a custom LOS is a submit-handler POST. On tier-1 mortgage search traffic — queries like 'mortgage application form template', 'home loan wizard css' — CPMs run 30-80 USD and the disclosure-ready pattern is what enterprise loan officers cite as the reason to pick a hand-coded shell over a hosted third-party origination widget.

The Healthcare and Medical Intake Form demo models a WCAG 2.2 AA and HIPAA Privacy Rule 45 CFR 164.514 friendly UI shell. Step 1 captures demographics with the fewest identifiers needed for scheduling (name, date of birth, ZIP) — the HIPAA minimum-necessary standard 45 CFR 164.502(b) means the intake form should not ask for SSN at the UI layer unless a specific downstream workflow requires it. Step 2 collects chief complaint, symptom duration and pain scale with a Likert-style radio group. Step 3 collects medication list and allergy history in structured fields so downstream EHR mapping to Epic MyChart, Cerner PowerChart, Athenahealth or eClinicalWorks is one payload transform. Step 4 collects a consent signature and privacy acknowledgment — unbundled from the intake data itself, an explicit checkbox for treatment consent plus a separate optional checkbox for the practice's marketing list, which meets both HIPAA 45 CFR 164.508 authorization requirements and the FTC Health Breach Notification Rule updated in 2024. Every field has a real label wired by for and id, every input has the correct type (tel, email, date), and any dynamic error uses role='alert' or aria-live — so a Section 508 refresh (36 CFR 1194) audit and a WCAG 2.2 SC 2.4.13 focus-appearance check pass zero-violation. Ad CPMs on healthcare-portal and patient-intake content run 30-50 USD in tier-1 markets.

The Account Security and KYC Verification Setup demo is the copy-paste UI shell for a FinCEN Customer Identification Program 31 CFR 1020.220 and Customer Due Diligence 31 CFR 1010.230 compliant flow. Step 1 collects account credentials with a strength meter and password autocomplete=new-password so the browser password manager engages. Step 2 sets 2FA — the demo carries a 6-digit OTP input that auto-advances between boxes, announces the entered code via aria-live for screen-reader users, and rejects non-numeric input at the inputmode=numeric layer. Step 3 selects the document type (passport, driver license, national ID) from an icon-card radio group so the downstream vendor (Onfido, Persona, Jumio, Veriff, Stripe Identity, Alloy, Socure) receives a clean document_type token. Step 4 captures the selfie-and-document match consent explicitly and unbundled from the account creation itself, which meets both FinCEN CDD and EU GDPR Article 7 unbundled-consent standards. The Vault Lock and OTP entry patterns match what Chime, Wise, Revolut, Monzo, Starling, Up Bank, Coinbase, Kraken and Gemini actually ship. On tier-1 fintech and crypto search traffic — queries like 'kyc verification form ui', 'otp input 6 digit css', '2fa setup form design' — CPMs run 25-45 USD and fintech buyers cite the copy-paste rebrandability plus the WCAG 2.2 audit-ready markup as the two reasons to pick a hand-coded shell over a hosted Auth0 or Onfido Universal Login.

The Auto and Home Insurance Quote Request demo models the low-friction quote-wizard pattern that Progressive, Geico, State Farm, Allstate, USAA, Aviva, Direct Line, AAMI and Suncorp all converge on. Step 1 asks for the ZIP code (or postcode) and the coverage type only — a single field commit is enough to fetch a rating region and start the quote engine, and lets the applicant preview the process before entering personal detail. Step 2 collects vehicle year-make-model with a chained dependent select, or the property type with a radio-card group for home insurance. Step 3 collects the driver or occupant details with strict TCPA 47 CFR 64.1200 friendly consent — an explicit unbundled checkbox for phone-marketing outreach if the quote is followed up by a call. The segmented progress bar surfaces the exact number of remaining steps so quote-abandonment drops. State insurance producer licensing (NAIC and state DOI rules) requires the licensed-agent name and license number to appear on any binding quote page — the demo carries a --producer-plate slot in the disclosure region for this. Ad CPMs on auto insurance and home insurance content run 25-60 USD in tier-1 markets, driven by the same rating-engine partners bidding for lead capture.

All 16 demos ship a small vanilla JS bundle to handle step transitions, per-step validation and progress-bar updates — pure CSS cannot advance a step and validate a field at the same time. Each demo's JS is self-contained in the JS tab, framework-agnostic, and never depends on jQuery or a build step. Drop the HTML straight into React (rename class to className and for to htmlFor), Vue (rename @click to v-on or reuse addEventListener), Svelte or SvelteKit (Svelte accepts class and for natively), Astro (use the demo as a .astro component with the CSS in a style block), Next.js (drop into any client component with 'use client'), Remix (works in any route module) or Solid.js. All 16 demos are MIT licensed and free for commercial use — no attribution required, no CDN dependency, no build step. The .msf-NN wrapper carries CSS custom properties (--brand, --ink, --card-bg, --radius) so a US SaaS onboarding wizard, a UK fintech KYC flow, an Australian insurance quote or a Canadian mortgage application can reskin from one place.

The 16 multi-step forms in this gallery are built to the WCAG 2.1 AA baseline every enterprise SaaS RFP quotes and the new WCAG 2.2 SC 2.4.13 focus-appearance requirement that landed in October 2023. Concretely: every input has a real label (either wrapping the input or tied by matching for and id), every input carries the correct type (email, tel, number, date) plus the correct autocomplete token so browser autofill and password managers engage, every step-navigation control keeps a visible focus-visible ring at 2px minimum with a 3:1 contrast ratio, icon-only buttons carry aria-label, per-step error copy uses role='alert' or aria-live='polite' so screen readers announce failures without a page reload, and any transition animation between steps is wrapped in a prefers-reduced-motion calm-down block. The progress bar carries aria-valuenow, aria-valuemin, aria-valuemax and role='progressbar' so JAWS, NVDA, VoiceOver and TalkBack announce '2 of 4' correctly. The step change is announced via an aria-live region so a screen-reader user hears 'Step 2 of 4 — Shipping details' when the next button is pressed. This meets Section 508 refresh 36 CFR 1194 which incorporates WCAG 2.0 AA by reference, Australia's Disability Discrimination Act 1992 obligations via the Digital Service Standard, and UK EN 301 549 conformance required for public sector procurement. If your enterprise buyer runs axe-core, Deque WAVE or Siteimprove against the wizard, all 16 demos pass zero-violation.

For GDPR Article 7 and CCPA §1798.135 compliant intake flows, consent must be unbundled from the wizard's own submit button — a single 'Get my quote' or 'Submit application' click must never double as consent to marketing SMS, email newsletters or third-party data sharing. The Insurance Quote, Moving Quote, Home Services Booking, B2B Lead Qualification and Personal Loan demos all model this correctly: the wizard's final step carries an explicit unticked consent checkbox for phone-marketing outreach with clear plain-language copy ('Call or text me about my quote — you can opt out any time'), separate from the wizard's submit action. This meets TCPA 47 CFR 64.1200 prior express written consent requirements for marketing calls and texts in the US, the EDPB Guidelines 05/2020 for GDPR, and the California AG's July 2023 CCPA regulations. For strictly-necessary session cookies (progress persistence, CSRF), no cookie banner is required under GDPR PECR because the exception at Article 5(3) of the ePrivacy Directive covers them — tracking cookies wait for explicit consent from a separate banner. The Donation Wizard for non-profits carries an unbundled email-newsletter opt-in that satisfies both the CAN-SPAM Act and the UK PECR 2003 for charity communications.

Four persistence patterns work for tier-1 multi-step forms, and the demo shell is compatible with any of them. First, localStorage: on every step change, JSON.stringify the form values keyed by a form-instance UUID and write it to window.localStorage — the University Admission and Job Application demos are structured for this, and a resumed session repopulates the fields on load. This is the right pattern for a low-sensitivity flow like an event registration or a college application draft. Second, sessionStorage: same API, cleared on tab close — the right pattern for a checkout or insurance quote that must not survive a browser restart for privacy reasons. Third, an HTTPOnly cookie server-side session: on every step submit, POST the delta to a /forms/:id/step endpoint and let the server maintain the draft record — the right pattern for HIPAA patient intake, KYC verification and mortgage applications where PII must never touch client-side storage. Fourth, a magic-link resume email: on step 1, capture the email and send a resume URL with a signed token, so a mobile applicant can finish on desktop — the right pattern for long applications like a car loan or a university admission. All four patterns require zero UI changes to the demos here — add the JS hook in the step-change handler and pick the storage layer that matches the sensitivity of the payload.

Every input carries the correct inputmode token so the mobile keyboard opens in the right mode without extra taps — inputmode='numeric' for OTP boxes, ZIP codes and card numbers, inputmode='email' for email inputs, inputmode='tel' for phone inputs, inputmode='decimal' for currency amounts. Every input also carries the correct autocomplete token so iOS QuickType, Android Autofill, 1Password, iCloud Keychain and Bitwarden engage — given-name, family-name, tel, cc-number, address-line1, postal-code, transaction-amount and the two dozen other WHATWG autocomplete tokens are used correctly across the 16 demos. Every tappable control clears the WCAG 2.5.5 44x44 CSS pixel minimum target size, so a one-handed thumb on an iPhone 15 Pro Max or a Pixel 8 Pro can advance a step without a mis-tap. The step navigation bar sticks to the bottom of the viewport on mobile via position:sticky with bottom:0 and a safe-area-inset-bottom padding, so the primary CTA stays in the thumb zone below the fold. The demo shells use scoped .msf-NN CSS custom properties (--brand, --card-bg, --radius) so a US SaaS mobile-first onboarding, a UK banking KYC on iOS, an Australian insurance quote on Android or a Canadian mortgage app on tablet can reskin from one place without touching the JS.