By /

Building Multi-Step Forms in Titan Web: The Stepper Pattern Guide

Building Multi-Step Forms in Titan Web: The Stepper Pattern Guide

Long forms kill conversion rates. A 15-field form on a single page feels overwhelming, but the same 15 fields split across 3 steps feels manageable. In Titan Web, the Stepper pattern is the standard way to build multi-step forms with progress tracking, per-step validation, and clean navigation. Here is how to implement it correctly.

When to Use a Stepper vs a Simple Form

  • Use a simple form for 1-6 fields that fit on one screen without scrolling
  • Use a stepper when you have 7+ fields, or when fields belong to logically distinct groups (Contact Info → Details → Review)
  • Always use a stepper for onboarding flows, applications, and multi-object Salesforce submissions

Anatomy of a Titan Stepper Form

A Stepper form in Titan consists of three layers:

  1. Stepper container – the outer wrapper that manages step state and progress display
  2. Step panels – each step is a panel containing its own fields, labels, and layout
  3. Navigation buttons – Previous, Next, and Submit (on the final step only)

Step-by-Step Setup

1. Plan Your Steps First

Before touching the builder, write down your steps on paper. Each step should have a clear title and 3-5 fields maximum. A typical pattern for a Lead capture form:

  • Step 1: Contact Information (Name, Email, Phone)
  • Step 2: Company Details (Company, Title, Industry)
  • Step 3: Your Request (Subject, Description, Preferred Contact Method)

2. Build the Form with Page Breaks

In Titan’s form builder, add all fields in sequence, then insert Page Break elements between each logical group. Titan automatically renders these as stepper steps with a progress indicator at the top. Set the form’s usePageBreak property to true.

3. Configure Per-Step Validation

The most common stepper mistake is validating all fields on the final submit. Users fill Step 1 incorrectly, click through Steps 2 and 3, hit Submit, and get an error about Step 1. Instead, set ignoreValidation: false on the form and mark required fields as mandatory: true. Titan validates the current step’s fields before allowing navigation to the next step.

4. Track Progress with Variables

Use a page variable v_currentStep (integer) to track which step the user is on. This variable is useful for conditional logic – for example, showing a summary panel only when v_currentStep == 3, or changing the CTA button text from “Next” to “Submit” on the final step.

Stepper Best Practices

  • Show step titles in the progress bar – “Contact Info” is better than “Step 1”
  • Allow backward navigation – never trap users on a step
  • Preserve field values on back-navigation – Titan does this automatically with page variables
  • Show a review/summary on the final step – display submitted values before the user clicks Submit
  • Push to Salesforce only on the final step – never trigger a Push on intermediate steps
  • Keep steps balanced – 3-5 fields per step, not 1 field on Step 1 and 10 on Step 2

Related Articles

Explore Our Services

Building a complex multi-step form? Contact Titanixforce – we build stepper forms that convert.

Scroll to Top