Multi-Step Wizard

A multi-step interface for guiding users through a process or workflow.

Here's an example "pricing calculator" that serves to collect user feedback and contact information.

Note, the form fields are inactive and for illustrative purposes only.

Step of

Instant Price Calculator

Calculate your widget price in less than 60 seconds.

Where is your business located? *

Do you currently have a widget? *

Yes:

No:

How many widgets do you need? *

> 10:

10+:

What's the best email to contact you? *

Name Email

A valid email address is required to receive your price quote via email.
We respect your privacy and are not actually collecting your email address.

Your Widget Pricing

Your widget is approximately $1,000 - $3,000.

Further call to action/upsell/other messaging goes here.

Code Example Shortcut: z-multi-step-wizard

<div class="mswizard">
  <div class="step-info">Step <span id="current-step"><!--added dynamically--></span> of 
  <span id="total-steps"><!--added dynamically--></span></div>
  <div class="progress-bar-container">
    <progress class="mswizard-progress" value="0" max="100"></progress>
    <div class="progress-percentage">0%</div>
  </div>
  <div class="mswizard-step card theme-light narrow-xl" id="step-1">
    <p>Step 1 content</p>
  </div>
  <div class="mswizard-step card theme-light narrow-xl" id="step-2">
    <p>Step 2 content</p>
  </div>
  <div class="mswizard-step card theme-light narrow-xl" id="step-3">
    <p>Step 3 content</p>
  </div>
  <div class="mswizard-step card theme-light narrow-xl" id="step-4">
    <p>Step 4 content</p>
  </div>
  <div class="mswizard-step card theme-light narrow-xl" id="step-5">
    <p>Success content goes here</p>
  </div>
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.