Card Wizard Onboarding Flow
The Styled Onboarding – Card Wizard Flow component is a 4-step onboarding wizard presented as a centered card on a tinted background. A horizontal progress bar fills across all four steps, providing clear advancement feedback. Each step collects different types of input — role selection, interest tagging, referral source tracking, and a completion screen with next-action cards. All selections are designed to map directly to Memberstack custom fields via standard Webflow form elements. Key Features Step 1: Role selection via 2×2 icon card grid (Team lead, Developer, Designer, Founder/Exec), each with icon tile, title, description, and radio indicator. Step 2: Interest selection via multi-select tag chips (11 topics) with check icon on selected state and "3 selected · Choose at least 2" counter. Step 3: Referral source via icon-led radio list (Google search, Social media, Friend/colleague, Blog/article, Other) with single-select behavior. Step 4: Success completion screen with checkmark icon, congratulatory heading, two next-action cards (Go to dashboard, Browse templates), and full-width accent CTA. Horizontal 4-segment progress bar fills with accent color as steps advance. Potential Use Cases SaaS products collecting user role and interest data for personalized dashboards. Membership platforms tracking referral sources for attribution. Online communities gathering topic preferences for content recommendations. Any Webflow + Memberstack site needing a lightweight, card-based onboarding wizard.
