What is WowWizard?

WowWizard is a jQuery plugin that is designed for developers seeking an awesome & multi-purpose form wizard. I needed to write a interactive form that is not just made up from inputs, but instead giving people a better experience so WowWizard is made. Check out a quick demo.

Getting Started

A simple WowWizard plugin usage is as below. Plugin is simply being injected into the element you specify(<div class="wow-wizard"> in this case).

$('.wow-wizard').wowWizard({
    theme: 'pomegranate',
    nextButtonText: 'Next',
    loader: '../../img/loader.gif',
    steps: [
        {...},
        {...}
    ]
});

Options

• theme: Custom theme to use in the plugin. We have 4 themes, which are: pomegranate, blueberry, lime and banana (thanks @RyanFitzgerald for the lime and banana)
• nextButtonText: Text that is going to be seen in "Next" button.
• loader: If you don't want to use the default loader, you can specify another one here.
• steps: Steps array. Basically keeps your steps. Step types & options will be mentioned below.

Step Types

Every step has some common options and some step-specific options. Options that exist in every step:

• name: Name of the step. You will get the data related to this step with this key.
• type: Specifying the type of the step. Step types will be mentioned below.
• indicatorName: Name that is going to be seen in as step name in the indicator box.
• questionTitle: Title of the step question.
• questionDescription(optional): Description of the step question.
• errors(optional): Custom error messages for your step. Steps of type other than form has only "required" error message, forms also have "email" error message which will trigger if user types a wrong email to an email field. #### single_choice: User select only one choice from the given inputs. For answers, text represents the text user sees inside the button. Value is the slug that represents data.

{
    name: 'estate_type',
    type: 'single_choice',
    indicatorName: 'Estate Status',
    questionTitle: 'You are buying an estate for sure. For rent or for sale?',
    questionDescription: 'Answer me!',
    answers: [
        {
            value: 'for_rent',
            text: 'For Rent'
        },
        {
            value: 'for_sale',
            text: 'For Sale'  
        }
    ],
    errors: {
        required: "Your custom required error message."
    }
}

multiple_choice:

User select only multiple choices from the given inputs.

{
    name: 'districts',
    type: 'multiple_choice',
    indicatorName: "Districts",
    questionTitle: 'Districts Choice?',
    questionDescription: "Where are you buying it?",
    answers: [
        {
            'value': 'alaska',
            'text': 'Alaska'
        },
        {
            'value': 'arizona',
            'text': 'Arizona'  
        }
    ]
}

textarea:

Simply a freetext field for user to pass information. There is no validation in this step.

{
    name: 'details',
    type: 'textarea',
    indicatorName: 'Details',
    questionTitle: 'Give us some details',
    questionDescription: "We. Want. All. Your. Data",
}

multiple_image_choice

User chooses multiple images from given choices.

{
    name: 'pokemon_choice',
    type: 'multiple_image_choice',
    indicatorName: 'Pokemon',
    questionTitle: 'Pokemon Selection',
    questionDescription: 'Select your pokemon!',
    answers: [
        {
            text: 'Squirtle',
            value: 'squirtle',
            imageUrl: '../img/1.png'
        },
        {
            text: 'Bulbasaur',
            value: 'bulbasaur',
            imageUrl: '../img/2.png'
        },
        {
            text: 'Charmander',
            value: 'charmander',
            imageUrl: '../img/3.png'
        },
    ],
    errors: {
        required: "You should choose at least one of the choices."
    }
}

Note: Image paths are relative to html document you are going to use wizard on.

Dependent Step

The most exciting thing about this plugin is it can act like a tree when it comes to received user data. You can define steps according to the user's previous answers.

For this step, you only provide indicatorName and the isDependent field. If you mention "isDependent" here, the steps becomes dependent and you define your steps in a "steps" array.

In that array, there are only 2 extra fields: triggerStep & triggerAnswer.

• triggerStep: The order of the step to be looked for the answer.
• triggerAnswer: The answer which will trigger this step to be one to be used.

{
    isDependent: true,
    indicatorName: "Extra Information",
    steps: [
        {
            name: 'extra_type_1',
            type: 'single_choice',
            questionTitle: 'Who are you?',
            questionDescription: "I'm asking this because you chose \"For Rent\" option before.",
            triggerStep: 2,
            triggerAnswer: 'for_rent',
            answers: [
                {
                    value: 'nobody',
                    text: 'Nobody'
                },
                {
                    value: 'everybody',
                    text: 'Everybody'  
                },
            ]
        },
        {
            name: 'extra_type_2',
            type: 'single_choice',
            questionTitle: 'Why would you buy it?',
            questionDescription: "I'm asking this because you chose \"For Sale\" option before.",
            triggerStep: 2,
            triggerAnswer: 'for_sale',
            answers: [
                {
                    value: 'for_investment',
                    text: 'For Investment'
                },
                {
                    value: 'for_research_purposes',
                    text: 'For Research Purposes'  
                }
            ]
        },
    ]
}

Forms

In "form" type, you can specify as much field as you like, give them "required" property, their types etc.

{
    name: 'contact',
    type: 'form',
    indicatorName: "Contact",
    questionTitle: 'Contact Information',
    inputs: [
        {
            type: 'text',
            name: 'first_name',
            placeholder: 'First Name',
            required: true
        },
        {
            type: 'text',
            name: 'last_name',
            placeholder: 'Last Name',
            required: true
        },
        {
            type: 'text',
            name: 'phone',
            placeholder: 'Phone Number',
        },
        {
            type: 'email',
            name: 'email',
            placeholder: 'E-Mail',
        }
    ],
    errors: {
        required: "Required fields cannot be empty."
    }
}