Press "Enter" to skip to content

A Wizard-Style Plugin With a Series of Customizable Steps | MultiStep

MultiStep is a multi-step processor plugin that dynamically creates and displays a multi-step processor in a popup based on Bootstrap’s Modal.

multi step form bootstrap, bootstrap 4 multi step form wizard, step wizard bootstrap, bootstrap 3 step wizard example, bootstrap step wizard with progress bar, bootstrap 4 multi step form wizard with validation

How to make use of it:

1. Load the mandatory JavaScript and CSS files in your Bootstrap challenge.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">

<!-- MultiStep stylesheet -->
<link rel="stylesheet" href="dist/css/MultiStep.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="dist/css/MultiStep-theme.min.css">

<!-- jQuery -->
<script src="jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="bootstrap.min.js"></script>

<!-- MultiStep JS -->
<script src="dist/js/MultiStep.min.js"></script>

2. Create an empty DIV container for the modal wizard.

<div id="submitModal" class="multi-step">
</div>

3. Create a trigger button to launch the modal wizard.

<button class="btn btn-primary" data-toggle="modal" data-target="#submitModal">Launch</button>

4. Define your individual steps in an array of JS objects as follows:

const mySteps = [{
        content: 'Hello World!',
        label: 'Custom label'
      },{
        content: 'This is a multi-step modal'
      },{
        content: 'You can have skip options',
        skip:true
      },{
        content: '<small>You can include html content as well!</small><br><br>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>',
        skip: true
      },{
        content: 'This is the end<br>Hold your breath and count to ten',
}]

5. Initialize the modal wizard and accomplished it.

$('.modal').MultiStep({
  data: mySteps
});

6. Customize the message displayed within the remaining step.

$('.modal').MultiStep({
  data: mySteps,
  final: 'Are you sure you want to confirm?',
  finalLabel: 'Complete'
});

7. Set the title of the modal wizard.

$('.modal').MultiStep({
  data: mySteps,
  title: 'Your Title Here'
});

8. Set the modal size.

$('.modal').MultiStep({
  data: mySteps,
  modalSize: 'md'
});

9. Customize the label text.

$('.modal').MultiStep({
  data: mySteps,
  prevText: 'Previous',
  skipText: 'Skip',
  nextText: 'Next',
  finishText: 'Finish'
});

10. Callback features can be triggered on close.

$('.modal').MultiStep({
  data: mySteps,
  onClose: function() {
  },
  onDestroy: function($elem) {
  }
});
 

API

static MultiStep.get(element: HTMLElement):
Static method that gets MultiStep object for already bound element

MultiStep.addStep():
Add step in the wizard and returns the step object

MultiStep.getStep(stepNumber: number):
Returns the step object of given step number

MultiStep.updateOptions(newOptions: MultiStepOptions):
Updates the multiStep options

MultiStep.reset:
Reset step progress

Step.setContent:
Sets HTML content for a step object

Step.getStepNumber:
Gets step number. Step number starts from 1.

Options

onComplete():
Callback to notify when steps are completed

onNext(step: Step):
Callback to notify when next step is triggered. Provides step object as parameter

onPrev(step: Step):
Callback to notify when previous step is triggered. Provides step object as parameter

nextLabel:
Label for next button. Default is ‘Next’

prevLabel:
Label for previous button. Default is ‘Previous’

completeLabel:
Label for complete button. Default is ‘Finish’

Multi-step Modal Wizard Plugin, MultiStep Github, vertical multi step form bootstrap 4, form wizard bootstrap 4


See Demo And Download

Official Website(Kinle): Click Here

This superior jQuery/javascript plugin is developed by Kinle. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.