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
  6. Dynamic Steps (Mobile Only Feature)
    1. Dynamic Form Card

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. Preserve Step On Back
  4. Navigation Bar Background
  5. Navigation Bar Alignment
  6. Step Line Color
  7. Active Step Line Color
  8. Completed Step Line Color
  9. Text Color
  10. Active Text Color
  11. Completed Text Color
  12. Item Background Color
  13. Active Item Background Color
  14. Completed Item Background Color
  15. Header Font Size
  16. Style

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