LogoLogo
Back to studio
  • 🧠Core Concepts
    • Introduction to Formsort
    • Formsort quickstart guides
      • Add content and collect answers
      • Capture demographic data
      • Add informational content
      • Template your variables
      • Add conditional logic
      • Using conditional logic with Calculated and API variables
      • Add a scheduling option
      • End the flow
      • Review your variable schema
      • Set up integrations
    • How data works in Formsort
      • Responder UUIDs
    • Understanding flows
    • Versioning in Formsort (Deploying)
      • Variant revisions
      • Managing revisions
  • ✨Creating Flows
    • Building a new flow
      • Groups
      • Steps
      • Copy-pasting form content
  • Adding questions and content
    • Questions
      • Select
      • Text
      • Address
      • Comparison
      • Confirmation
      • Date
      • Date & time
      • Email address
      • File upload
      • Grid choice
      • Iframe
      • Image upload
      • Number
      • Payment
      • Phone number
      • Postal code
      • Question group
      • Region
      • Signature
      • SSN
      • Yes/No
    • Content
      • Statement
      • Image
      • Next button
      • Video
      • Divider
      • Map
  • Controlling the flow with conditions and logic
    • Advanced logic
  • Variable templating
  • Redirects and endings
  • Field validation
  • Flow and variant management
  • Content library
  • 🧬JSON Form Definition
  • JSON schemas
  • Validating flow schemas
  • Events subscriptions
  • Flow content data format
  • 🎨Styling
    • Customizing appearance
      • Content area & form layout
      • Buttons
      • Typography
      • UI states
      • Color and dimension variables
      • Question containers
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
      • Animations and transitions
  • CSS & Advanced Styling
    • Custom CSS overrides
    • Step styling
    • CSS reference
  • 🔁Form Behavior Settings
    • Variant settings
      • Form behavior for returning users
      • Group ranking API
    • Navigation sidebar
  • ⚙️Response Data Collection & Management
    • Schema (variables)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
  • Saving & retrieving responses
  • Importing Data
    • URL parameters
    • POST body
    • Embed query parameters
  • 📊Analytics and Attribution
    • Built-in analytics
    • Split testing
  • 🚀Publishing and Deployment
    • Live preview overview
    • Environments
      • Loading different environments
    • Embedding
      • Web-embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Pre-deployment checklist
  • 📁Workspace Management
    • Accounts
      • Roles and permissions
    • Custom domains
    • Workspace domain detection
  • 🛠️Formsort Admin API
    • Admin API
  • 🔌Integrations
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
Powered by GitBook
On this page
  • Layout styles
  • Changing the vertical positioning
  • Counting groups or steps
  • How is progress calculated?

Was this helpful?

  1. Styling
  2. Customizing appearance

Progress bar

Display user progress through a form flow.

PreviousDivider linesNextComparison cards

Last updated 21 days ago

Was this helpful?

Progress indicators such as completion bars and step counts are helpful in giving responders a sense of how far along in the flow they are. Especially for longer flows, showing progress indicators can help conversion, as user expectations are set correctly from the outset, and feedback is given as every step is completed.

To enable progress bars, see Progress indicators within the style set editor.

Layout styles

The sizes, colors, and other aspects of these layout types can be further customized within the style editor.

Changing the vertical positioning

You can use the Vertical position in the Progress Indicator menu within the style editor to change the placement of the progress bars.

Counting groups or steps

By default, progress indicators show users the position of the user's current step within the total number of steps within the flow.

How is progress calculated?

To avoid having a progress indicator that jumps around, the progress indicators always include every step in the denominator - the percentage completion is just current step index / total number of steps. This is why sometimes the progress bar may jump: the responder is skipping over steps that were conditionally disabled.

Note that consecutive steps that all use the same variables as their condition but check for different values of that condition are collapsed together when calculating progress, as a responder would only ever be able to access one of those steps.

You can also use the to change the positioning of any of the components, including the progress indicators.

In the case that you have a large number of steps, it might be useful to indicate progress by , by selecting Groups under Count steps or groups?

If your flow has steps which are only enabled based on a , the number of steps available to the responder can change based on the answers that they provide.

🎨
groups
condition
Layout editor
The linear layout type
The subway stops layout type
The text layout type
Counting groups, with labels shown