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 the position of the steps in the form wizard. Options include Top, Bottom, Left, Left (excluding steps), and Progress Bar.
  2. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  3. Number of step(s): Define the total number of steps that you want to enable in the form wizard.
  4. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  5. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
  6. Dynamic Steps (Mobile Only Feature): This option is available only on mobile, enabling dynamic form steps based on user interactions.
    1. Dynamic Form Card: Allows the use of dynamic cards in the form, making the steps more adaptable.

2nd Step – Validation

  1. Enable step Validation: Turn this "Yes" if you require all the steps to be validated and filled in completely before proceeding to the next stage.
  2. Show Validation Summary: This option displays a summary of validation errors across all steps of the form.
  3. Steps Not Clickable: When enabled, this option prevents users from clicking on steps to navigate directly, ensuring that steps are completed in sequence.

3rd Step – Advance

  1. Preserve Step When Back (Fix Step): Store the step number in local storage, and it will persist until the page is closed.
  2. Preserve Step When Back (Dynamic): Store the step number in the model, which should be returned from the Get API.
  3. Preserve Step When Back (By Query String Param): Store the step number in the URL query string for persistence.
  4. Hide Steps?: Hides the step indicators for a cleaner user interface.
  5. Hide Next Button: Hide the next button and related settings.
    1. Next Button Type: Select the type of the next button (e.g., regular, icon-based).
    2. Next Button Custom Class: Apply custom CSS class for styling the next button.
    3. Next Button Text: Text displayed on the next button.
    4. Next Button Icon: Icon displayed on the next button.
    5. Next Button Size: Select button size from Small, Medium, and Large.
  6. Hide Back Button: Hide the back button and related settings.
    1. Back Button Type: Select the type of the back button (e.g., regular, icon-based).
    2. Back Button Text: Text displayed on the back button.
    3. Back Button Custom Class: Apply custom CSS class for styling the back button.
    4. Back Button Icon: Icon displayed on the back button.
    5. Back Button Size: Select button size from Small, Medium, and Large.
  7. Navigation Bar Background: Customize the background color of the navigation bar.
  8. Navigation Bar Alignment: Choose how the navigation bar is aligned (e.g., left, center, right).
  9. Step Line Color: Set the color of the step line connecting different steps.
  10. Active Step Line Color: Set the color of the line for the currently active step.
  11. Completed Step Line Color: Set the color of the line for completed steps.
  12. Text Color: Set the text color for the steps.
  13. Active Text Color: Set the text color for the active step.
  14. Completed Text Color: Set the text color for completed steps.
  15. Item Background Color: Set the background color for each step item.
  16. Active Item Background Color: Set the background color for the active step item.
  17. Completed Item Background Color: Set the background color for completed step items.
  18. Header Font Size: Define the font size of the header for the step navigation.
  19. Style: Apply custom styles to the step navigation.

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