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
  • Adding steps to a group
  • Group settings
  • Group logic
  • Style
  • Styling groups

Was this helpful?

  1. Creating Flows
  2. Building a new flow

Groups

Groups are helpful organizers for steps.

PreviousBuilding a new flowNextSteps

Last updated 1 day ago

Was this helpful?

Groups help structure your flow by organizing steps into logical sections. They support conditional logic, custom styling, and dynamic ordering, making it easier to manage and present complex forms.

Groups themselves are not content, but help keep your flow and studio organized by acting as containers for steps. They can:

  • be , which will either hide or render the steps inside.

  • use their own styling that overrides the flow theme.

  • be dynamically re-ordered using the .

The user moves through the flow starting from the group at the top, down to the last group. This is the default behavior for Formsort.

If you'd like to allow your user to jump around the flow, see our .

Adding steps to a group

To add a group, click Edit groups when hovering the left-side groups editor, or click the arrow at the top right.

In the expanded group editor, you can add groups and then create steps within them.

If you do not create groups, all steps appear within a default group.


Group settings

Group Label

Group ID


Group logic

Style

Styling groups

These are particularly handy if you have distinct sections of a flow which might want to adopt a slightly different look and feel.

For example, you might have an Introduction group that contains some lightweight questions and content perhaps a more colorful and spacious design. You can follow that with a Data collection group that has a denser layout to facilitate answering many questions all together

If you want to move existing steps into a group, you can drag the step into the groups while the group editor is expanded. Alternatively, you can use steps to re-organize content between groups.

You can add a label to easier identify the function of a Group, e.g. naming a Group "Introduction" if it houses the content/questions related to introducing a user to the form. Group labels are not shown to users, unless you choose to show them within the .

Used to create a stable definition/ID of the group when using the . See the linked documentation for more information.

Groups can be made , which will show or hide all the steps within a group all at once.

can be used to alter any part of the general Theme set within a group.

✨
cut and paste
Group Ranking API
conditional
conditionally enabled
Group Ranking API
progress bar
Press the caret to close the Group menu
Group style override menu
Click "Edit groups" to open the Group menu
Rendering a group based on a being passed in at flow load.
external variable
Navigation Sidebar
Group style overrides