Flexible Bootstrap Plugin To Create Wizard Style Interface - Smart Wizard

Smart Wizard is a jQuery wizard plugin that lets you split long content into a step-by-step interactive wizard interface. Great for form wizard and step based tour guide.

More features:

• AJAX enabled.
• Accessibility.
• Dark Mode
• Events supported.
• Styled with Bootstrap.
• 5 built-in themes.
• Supports URL hash.
• Creates a step bar that shows the current step.
• Keyboard navigation.
• Compatible with Bootstrap 5, Bootstrap 4 and Bootstrap 3.

See Also:

• 10 Best Form Wizard Plugins To Engage Users And Increase Conversions

How To Use It:

1. Load the Bootstrap's stylesheet in the webpage (OPTIONAL Since v5.0.0).

<link rel="stylesheet" href="bootstrap.min.css" />

2. Load the core stylesheet SmartWizard.css and a theme CSS of your choice in the webpage.

<!-- Core Stylesheet -->
<link href="./dist/css/smart_wizard.min.css" rel="stylesheet" />
<!-- Optional SmartWizard themes -->
<link href="./dist/css/smart_wizard_arrows.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_dots.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_round.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_square.min.css" rel="stylesheet">

<!-- All In One -->
<link href="./dist/css/smart_wizard_all.min.css" rel="stylesheet" />

3. The basic HTML structure for the smart wizard.

<div id="smartwizard">
  <ul class="nav">
   <li>
     <a class="nav-link" href="#step-1">
      Step 1
     </a>
   </li>
   <li>
     <a class="nav-link" href="#step-2">
      Step 2
     </a>
   </li>
   <li>
     <a class="nav-link" href="#step-3">
      Step 3
     </a>
   </li>
   ... more nav items here ...
  </ul>

  <div class="tab-content">
   <div id="step-1" class="tab-pane" role="tabpanel">
      Step 1
   </div>
   <div id="step-2" class="tab-pane" role="tabpanel">
      Step 2
   </div>
   <div id="step-3" class="tab-pane" role="tabpanel">
      Step 3
   </div>
   ... more steps here ...
  </div>
</div>

4. Load jQuery library and the jQuery Smart Wizard plugin's script at the end of the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/jquery.smartWizard.min.js"></script>

5. Initialize the smart wizard with default options. That's it.

$('#smartwizard').smartWizard();

6. This example shows how to load steps from an external data source via AJAX:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#step-1" data-repo="jquery-smarttab">
      <strong>SmartTab</strong><br />repository details from GitHub
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#step-2" data-repo="smartwizard">
      <strong>SmartWizard</strong><br />repository details from GitHub
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#step-3" data-repo="jquery-smartcart">
      <strong>SmartCart</strong><br />repository details from GitHub
    </a>
  </li>
</ul>

$("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {

  var repo    = anchorObject.data('repo');
  var ajaxURL = "https://api.npms.io/v2/package/" + repo;
  // Return a promise object
  return new Promise((resolve, reject) => {

    // Ajax call to fetch your content
    $.ajax({
        method  : "GET",
        url     : ajaxURL,
        beforeSend: function( xhr ) {
            // Show the loader
            $('#smartwizard').smartWizard("loader", "show");
        }
    }).done(function( res ) {
        // console.log(res);

        var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
        html += '<br>URL: <strong>' + ajaxURL + '</strong>';
        html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
        html += '<br>Description: ' + res.collected.metadata.description;
        html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
        html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');

        // html += '<br>Clone URL: ' + res.clone_url;
        html += '<br>Stars: ' + res.collected.github.starsCount;
        html += '<br>Forks: ' + res.collected.github.forksCount;
        html += '<br>Watchers: ' + res.collected.github.subscribersCount;
        html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;

        html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
        html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
        html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);

        // Resolve the Promise with the tab content
        resolve(html);

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    }).fail(function(err) {

        // Reject the Promise with error message to show as tab content
        reject( "An error loading the resource" );

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    });

  });
});

7. All default options which can be used to easily customize your wizard.

$('#smartwizard').smartWizard({

  // Initial selected step, 0 = first step 
  selected: 0,  

  // 'arrows', 'square', 'round', 'dots'
  theme: 'basic',

  // Nav menu justification. true/false
  justified: true,

  // Automatically adjust content height
  autoAdjustHeight:true, 

  // Show url hash based on step 
  enableURLhash: true, 

  // Enable the back button support
  backButtonSupport: true, 

  // Animation options
  transition: {
    // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
    animation: 'none', 
    // Animation speed. Not used if animation is 'css'
    speed: '400', 
    // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
    easing: '', 
    // Only used if animation is 'css'. Animation CSS prefix
    prefixCss: '', 
    // Only used if animation is 'css'. Step show Animation CSS on forward direction
    fwdShowCss: '', 
    // Only used if animation is 'css'. Step hide Animation CSS on forward direction
    fwdHideCss: '', 
    // Only used if animation is 'css'. Step show Animation CSS on backward direction
    bckShowCss: '', 
    // Only used if animation is 'css'. Step hide Animation CSS on backward direction
    bckHideCss: '', 
  },

  // Step bar options
  toolbar: {
    // none|top|bottom|both
    position: 'bottom', 
    // show/hide a Next button
    showNextButton: true, 
    // show/hide a Previous button
    showPreviousButton: true, 
    // Extra html to show on toolbar
    extraHtml: '' 
  },

  // Anchor options
  anchor: {
    // Enable/Disable anchor navigation 
    enableNavigation: true, 
    // Activates all anchors clickable always
    enableNavigationAlways: false, 
    // Add done state on visited steps
    enableDoneState: true, 
    // When a step selected by url hash, all previous steps are marked done
    markPreviousStepsAsDone: true, 
    // While navigate back, done state will be cleared
    unDoneOnBackNavigation: false, 
    // Enable/Disable the done state navigation
    enableDoneStateNavigation: true 
  },

  // Keyboard options
  keyboard: {
    // Enable/Disable keyboard navigation(left and right keys are used if enabled)
    keyNavigation: true, 
    // Left key code
    keyLeft: [37], 
    // Right key code
    keyRight: [39] 
  },

  // Language variables for button
  lang: { 
    next: 'Next',
    previous: 'Previous'
  },

  // CSS Class settings
  style: { 
    mainCss: 'sw',
    navCss: 'nav',
    navLinkCss: 'nav-link',
    contentCss: 'tab-content',
    contentPanelCss: 'tab-pane',
    themePrefixCss: 'sw-theme-',
    anchorDefaultCss: 'default',
    anchorDoneCss: 'done',
    anchorActiveCss: 'active',
    anchorDisabledCss: 'disabled',
    anchorHiddenCss: 'hidden',
    anchorErrorCss: 'error',
    anchorWarningCss: 'warning',
    justifiedCss: 'sw-justified',
    btnCss: 'sw-btn',
    btnNextCss: 'sw-btn-next',
    btnPrevCss: 'sw-btn-prev',
    loaderCss: 'sw-loading',
    progressCss: 'progress',
    progressBarCss: 'progress-bar',
    toolbarCss: 'toolbar',
    toolbarPrefixCss: 'toolbar-',
  },

  // Array of disabled Steps
  disabledSteps: [],    

  // Highlight step with errors
  errorSteps: [], 

  // Array Steps warning 
  warningSteps: [], 

  // Hidden steps
  hiddenSteps: [],

  // Callback function for content loading
  getContent: null, 
  
});

8. Available event handlers.

// When the plugin is initialized
$("#smartwizard").on("initialized", function(e) {
  // do something
});

// When the plugin is loaded
$("#smartwizard").on("loaded", function(e) {
  // do something
});

// Triggered just before leaving from a step
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepIndex, nextStepNumber, stepDirection) {
  // do something
});

// When a step is shown
$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
  // do something
});

9. Available API methods to create your own wizard controls.

// goto a specific step
$('#smartwizard').smartWizard('goToStep', stepIndex, force);

// update options
$('#smartwizard').smartWizard('setOptions', stepIndex);

// goto the next step
$('#smartwizard').smartWizard('next');

// goto the prev step
$('#smartwizard').smartWizard('prev');

// reset the wizard
$('#smartwizard').smartWizard('reset');

// change the state of step(s)
$('#smartwizard').smartWizard("setState", [1,3], "disable");
$('#smartwizard').smartWizard("setState", [2], "hide");

// unset the state of step(s)
$('#smartwizard').smartWizard("unsetState", [1,3], "disable");

// get the current step index
var stepIndex = $('#smartwizard').smartWizard("getStepIndex");

// show/hide content loader
$('#smartwizard').smartWizard("loader", "show");
$('#smartwizard').smartWizard("loader", "hide");

// get options info
$('#smartwizard').smartWizard("getOptions");

// get step info
$('#smartwizard').smartWizard("getStepInfo");

// adjust the content height of the current step
$('#smartwizard').smartWizard("fixHeight");

Changelog:

v6.0.6 (2022-10-03)

• Fixed: History back on step1 not working

v6.0.5 (2022-08-08)

• Fixed: unDoneOnBackNavigation not working

v6.0.4 (2022-07-31)

• Changed: Code optimizations

v6.0.3 (2022-07-31)

• Fixed: Navigation not properly maintained when navigate fast

v6.0.1 (2022-06-27)

• Added: Support for jQuery Slim version
• Added: Public function fixHeight.
• Added: Public function setState.
• Added: Public function unsetState.
• Added: Public function getStepInfo to get step index and total steps.
• Added: goToStep function with force parameter.
• Added: Built-in progressbar
• Added: New themes, Square and Round
• Added: Dots and Square these can have progressbar on navigation by adding nav-progress CSS Class.
• Added: Colors are changable dynamically using CSS variables.
• Added: Bootstrap 5 support
• Added: Num(badge) class support on all themes
• Added: RTL (Right-to-left language) support
• Added: initialized event
• Added: Move CSS class names to options
• Added: Transition animations can be extended
• Added: CSS Animations support on transition animations. Supports Animate.css
• Changed: JavaScript and CSS code is rewritten
• Changed: Imporoved all CSS themes
• Changed: Made most of the options can changed with setOptions function
• Changed: Rewritten option names and properties with minimal and meaningful names
• Changed: Improved transition animations
• Fixed: Reset doesn't clear the existing steps of the error state. 
• Fixed: goToStep method fails to recognize the correct step 
• Fixed: URL Navigation to check if step visited.
• Fixed: Fixed and also added fixHeight public function to refresh content height.
• Fixed: CSS Files are empty
• Fixed: stepNumber is incorrect on showStep event when no transition
• Fixed: showStep showing Null instead of index 0 on initializing
• Fixed: showStep's stepIndex contains previous index
• Fixed: Content not showing when used inside a Bootrap 4 modal
• Fixed: Other fixes
• Removed: this.options.toolbar.buttonPosition is removed
• Removed: cycleNavigation is removed
• Removed: Dark mode is removed. Added CSS variable support to change any colors. See example for dark colors.

v5.1.1 (2020-07-11)

• Added: Accessibility
• Added: Dark Mode support for all themes
• Added: New theme (Progress)
• Added: leaveStep event has new parameter => nextStepIndex
• Added: UMD (Universal Module Definition) support
• Fixed: Incorrect stepDirection on leaveStep event

v5.0.0 (2020-05-24)

• Complete rewrite of JavaScript and CSS
• CSS to SCSS
• Updated all build packages
• External Ajax content support via Promise
• New navigation animations added
• New themes added
• New public functions
• New content loading event
• Standalone CSS with Bootstrap compatibility

v4.4.1 (2020-02-16)

• Added goToStep and hiddenSteps methods
• Build system packages updated to latest available.

v4.3.1 (2018-03-12)

• Bootstrap 4 support, bug fixes and improvements

v4.2.2 (2017-03-27)

• Small fixes and multiple wizard example added

v4.2.1 (2017-03-27)

• Dots and Circles themes updated to new design and made responsive

v4.1.7 (2017-02-21)

• Dots and Circles themes updated to new design and made responsive

v4.1.5 (2017-02-01)

• JS & CSS update

v4.1.2 (2017-01-09)

• JS & CSS update

v4.1.1 (2016-12-08)

• many improvements and additions

2016-11-16

• Updated to version v4.0.5

---

This awesome jQuery plugin is developed by techlab. For more Advanced Usages, please check the demo page or visit the official website.