User onboarding form

Build a multi-step onboarding form with conditional logic and progress tracking

Create an engaging user onboarding experience with multiple steps, conditional fields, and a progress indicator. This example demonstrates how to collect user information, adapt questions based on previous answers, and guide users through a smooth onboarding process.

Complete example

This onboarding form collects a user’s position and referral source, with conditional fields that appear based on their selections.

import "formsmd/dist/css/formsmd.min.css";
import { Composer, Formsmd } from "formsmd";

// Create form with ID and submission endpoint
const composer = new Composer({
  id: "onboarding-form",
  postUrl: "/api/onboard"
});

// Choice input for position
composer.choiceInput("position", {
  question: "What's your position?",
  choices: ["Product Manager", "Software Engineer", "Founder", "Other"],
  required: true
});

// Text input if user selects "Other" position
composer.textInput("positionOther", {
  question: "Other",
  required: true,
  labelStyle: "classic",
  displayCondition: {
    dependencies: ["position"],
    condition: "position == 'Other'"
  }
});

// Start new slide, progress indicator at 50%
composer.slide({
  pageProgress: "50%"
});

// Choice input for how user discovered the product
composer.choiceInput("referralSource", {
  question: "How did you hear about us?",
  choices: ["News", "Search Engine", "Social Media", "Recommendation"],
  required: true
});

// Start new slide, show only if user was recommended, progress indicator at 75%
composer.slide({
  jumpCondition: "referralSource == 'Recommendation'",
  pageProgress: "75%"
});

// Email input for recommender email address
composer.emailInput("recommender", {
  question: "Who recommended you?",
  description: "We may be able to reach out to them and provide a discount for helping us out."
});

// Initialize with template, container, and options
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("onboarding-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`
    }
  }
);
formsmd.init();

Key features explained

1. Conditional logic

   Use displayCondition to show fields based on previous answers. The “Other” position field only appears when users select “Other” as their position.

   displayCondition: {
     dependencies: ["position"],
     condition: "position == 'Other'"
   }
   
2. Jump conditions

   Control slide visibility with jumpCondition. The recommender slide only displays if the user selected “Recommendation” as their referral source.

   composer.slide({
     jumpCondition: "referralSource == 'Recommendation'",
     pageProgress: "75%"
   });
   
3. Progress tracking

   Show users their progress through the form with the pageProgress parameter on each slide.

   composer.slide({
     pageProgress: "50%"
   });
   
4. Authorization headers

   Include authentication tokens when initializing the form to secure submissions.

   const formsmd = new Formsmd(composer.template, container, {
     postHeaders: {
       Authorization: `Bearer ${localStorage.getItem("token")}`
     }
   });
   

Customization tips

Add more personalization: Use the description parameter on any field to provide helpful context or instructions to your users.

Style fields consistently: Apply labelStyle: "classic" to conditional or follow-up questions to visually distinguish them from main questions.

The form automatically validates required fields before allowing users to proceed to the next slide. You don’t need to write any validation code.

Next steps

• Learn about choice inputs for creating selection fields
• Explore conditional logic for advanced form flows
• Check the slides documentation for customization options