LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • 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
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
Powered by GitBook
On this page
  • Adding steps to a group
  • Group settings
  • Group logic
  • Style
  • Styling groups

Was this helpful?

  1. Building flows
  2. Adding content

Groups

Groups are helpful organizers for steps.

PreviousAdding contentNextSteps

Last updated 8 months ago

Was this helpful?

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
Navigation Sidebar
Group style overrides
progress bar
Click "Edit groups" to open the Group menu
Press the caret to close the Group menu
Group style override menu
Rendering a group based on a being passed in at flow load.
external variable