Form Wizard

Our No-Code Form Wizard is a user interface design pattern that enables untrained users to achieve a goal through a series of steps. The user enters data in each view and proceeds to the next step until completion.

Wizards are best helpful for:

  1. For a fixed sequence of data entry that occurs infrequently
  2. For untrained users who need to be guided through a stepped process
  3. For a series of dependable and branched data input flows
  4. When users need to accomplish a goal that relies on complex task and sub-task completion

Let’s now discuss configuring a “Form Wizard” in your applications using our No-Code Workbench. But first, read through our step-by-step tutorial, accompanied by sample screens, to better understand and experience.

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Form Wizard” layout. Here you are required to fill in the following details:

  1. Step Position: Select step position from the following Top, Bottom, Left, Left but not steps, and Progress Bar
  2. Database Field Name (mandatory): These are the attributes of the form
  3. Number of step(s): Here, define the total number of steps that you want to enable in the form wizard
  4. Column Width
  5. Bootstrap Column Class

2nd Step – Validation

  1. Enable step Validation: Turn this “Yes” if you need all the steps validated and filled in completely before proceeding to the next stage.
  2. Show Validation Summary
  3. Steps Not Clickable

3rd Step – Advance

  1. Hide Next Button
    1. Next Button Type
    2. Next Button Custom Class
    3. Next Button Text
    4. Next Button Icon
    5. Next Button Size: Select button size from the following Small, Medium, and Large
  2. Hide Back Button
    1. Back Button Type
    2. Back Button Text
    3. Back Button Custom Class
    4. Back Button Icon
    5. Back Button Size: Select button size from the following Small, Medium, and Large
  3. Navigation Bar Background
  4. Navigation Bar Alignment
  5. Step Line Color
  6. Text Color
  7. Active Text Color
  8. Item Background Color
  9. Active Item Background Color
  10. Header Font Size
  11. Style

Click “Confirm” and “Form Wizard” control is configured.