What You'll Build

A step-by-step wizard form that guides users through multiple pages. You'll learn how to create multi-page forms with navigation, progress tracking, and cross-page data access.

What You'll Learn

How to create a pages container with addPages()
Adding individual pages with addPage()
Organizing page content with subforms
Building progress indicators with currentPageIndex()
Creating persistent headers and footers
Accessing data across pages for summaries

📄

Wizard Forms

Multi-page forms (wizards) break complex forms into manageable steps. This improves user experience by reducing cognitive load and allowing users to focus on one section at a time.

Navigation between pages is handled automatically!

Tutorial Steps

Step 1: Creating a Pages Container

Start by calling form.addPages() to create a pages container, then add your first page with pages.addPage(id).

💡 Tip:

Each page works like a mini-form. You can add rows, fields, and subforms to it just like you would to the main form.

Step 2: Adding Multiple Pages

Add multiple pages by calling addPage() multiple times. Each page gets a unique ID and can contain its own set of fields.

💡 Tip:

Use descriptive IDs for your pages like 'personalInfo', 'contactInfo', 'review'. This makes your code more readable and helps when referencing pages later.

Step 3: Organizing with Subforms

Each page can contain subforms for better organization. This is especially useful for complex forms with multiple sections per page.

💡 Tip:

Combining pages with subforms gives you a powerful way to organize complex forms. Pages divide the form into steps, while subforms group related fields within each step.

Step 4: Progress Indicator

Use pages.currentPageIndex() to track the current page and build a dynamic progress indicator.

💡 Tip:

The currentPageIndex() method returns a 0-based index. Content added to the form before or after the pages container is always visible (perfect for progress bars!).

Step 5: Persistent Header & Footer

Add content before or after the addPages() call to create persistent headers and footers that remain visible on all pages.

💡 Tip:

Use persistent headers for branding, titles, or progress bars. Rows added before addPages() appear at the top, rows added after appear at the bottom.

Step 6: Cross-Page Data Access

Access fields from other pages to create summaries or validation. Store page/subform references in variables to access their data anywhere.

💡 Tip:

This is perfect for review pages! By storing references to subforms in variables, you can access their field values from any other page using computedValue.

API Reference

form.addPages(): Creates a pages container, returns PagesBuilderTs
pages.addPage(id): Adds a new page with the given ID, returns FormTs
pages.currentPageIndex(): Returns the current page index (0-based)

Try It Yourself

Challenge 1: Create a 4-page signup wizard with personal info, account, preferences, and confirmation
Challenge 2: Add a progress bar that shows completion percentage
Challenge 3: Create a review page that validates all required fields are filled
Challenge 4: Add conditional pages that only appear based on user choices
Challenge 5: Build a form with page-specific validation messages

Next Steps

Excellent! You've mastered multi-page forms. Ready to learn about computed values for dynamic calculations?

Continue to Computed Values Tutorial

See it in action:

Multi-Page Wizard Example - A complete job application wizard

Other learning paths:

Learn conditional visibility for dynamic forms
Explore dynamic field validation
Master cross-field calculations