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

Was this helpful?

  1. Styling
  2. Customizing appearance

Question containers

PreviousColor and dimension variablesNextInputs and dropdowns

Last updated 2 days ago

Was this helpful?

Questions can have an overlay on top of the default styles applied to them, which gives the user a degree of freedom in defining how different questions and content components can appear on the page.

Any theme provided by Formsort will have at least one container style - default - but you can build up your collection of different styles by heading to Containers in the Theme editor.

+Add question style allows you to create a new question container.

The Label margin is of particular note here, since it provides spacing between the Question label the buttons/input bars related to it.

Once a container style is defined, any question can use any of the container styles by clicking the question, and choosing the container style in the Question container style dropdown in the Style menu.

These containers are helpful to make different kinds of questions visually distinct: a common pattern is to create an optional question class that is used for optional questions, with left border and margin to differentiate it from non-conditional questions.

🎨