Form Wizard

Demo Layout

Multi-step interactive form wizard designs with step indicators, progress tracking, live validation, and summary review.

Standard Multi-Step Wizard

Complete the 4 steps below to set up your account and preferences.

Step 1 of 4 (25%)
person 1
Account Info
Credentials & Role
badge 2
Profile Details
Personal Information
settings 3
Preferences
Notifications & Theme
verified 4
Review & Submit
Confirmation
Step 1: Account Credentials & User Role

Set up login credentials and select your workspace account role.

alternate_email
Please enter a valid username.
mail
Please provide a valid work email.
lock
Password is required.
lock_reset
Passwords must match.
admin_panel_settings
Administrator

Full access to settings, user management, and API controls.

manage_accounts
Manager

Can manage campaigns, view analytics, and generate reports.

group
Team Member

Standard access to view dashboard metrics and log daily activity.

Step 2: Personal Profile & Organization

Provide personal contact info and company details for account customization.

First name is required.
Last name is required.
call
Company name is required.
Avatar 1
Avatar 2
Avatar 3
Avatar 4
Avatar 5
Step 3: Notifications, Security & Preferences

Configure automated notification channels and privacy controls.

notifications Notification Channels
Receive weekly campaign performance and security logs.
Get urgent notifications for high-priority security events.
Periodic news about new LoyaltyForge feature releases.
shield Security & Mode
Requires authentication app code on login.
Automatically logout after period of inactivity.
Step 4: Review Details & Complete Setup

Please verify all summary details below before finalizing your setup.

Account Summary Overview
Ready to Submit
Summary Avatar
Alex Morgan
Administrator
Organization
LoyaltyForge Tech (Technology & SaaS)
Username: alex_dev
Work Email: alex@example.com
Phone Number: +1 (555) 234-5678
Country / Region: United States
Notifications: Email, SMS Enabled
Security: 2FA Enabled
You must check the agreement before submitting.
Vertical Step Navigation Wizard
Sidebar Timeline Layout
Setup Milestones
Step 1: Configure Workspace Scope

Select your project target parameters and loyalty rule environment.

Step 2: API Keys & Webhooks Configuration

Generate secret API tokens for real-time webhooks integration.

Step 3: Verification & Launch

All environment checks completed. System is ready to initialize.

check_circle Configuration Verified
All API keys and webhooks have passed connection test successfully.