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
  • Starter themes
  • Base Themes and Local Styles
  • Publishing themes
  • Switching themes
  • Remove Local Styles

Was this helpful?

  1. Styling

Customizing appearance

Customize the look and feel of your flows.

PreviousFlow content data formatNextContent area & form layout

Last updated 2 days ago

Was this helpful?

The Theme tab within each variant allows you to control the visual style of your flow. From here, you can define or override your design system to ensure a consistent, branded experience for responders.

Starter themes

Formsort provides a set of prebuilt starter themes that you’ll encounter when creating a new flow. These base themes serve as a great foundation for building and customizing your own themes.


Base Themes and Local Styles

Styling is customized in the Theme tab, and edits don't change the base theme directly. Instead, you’re applying variant-specific overrides on top of the base theme. This allows for design flexibility across variants without affecting the core styling used elsewhere.

Publishing themes

Publish a New Base Theme

Once you’ve finalized styling in the Theme tab, you can save your changes as a new base theme:

  1. Click in the Gear wheel in the corner of the toolbar.

  2. Select Save a copy to workspace.

  3. Enter a New Theme Label

  4. Click Save.

Update an Existing Theme

Once a new workspace Theme has been saved, you can publish updates to it by:

  1. Clicking the Gear wheel in the corner of the toolbar.

  2. Select Publish new version of theme.

Your updated theme will then be available for use across other flows and variants in your workspace.


Switching themes

To change the base theme of a variant:

  1. Navigate to the Theme tab.

  2. Click the Theme name in right corner of the toolbar.

  3. Choose from your existing base themes or one of Formsort’s starter themes.

Remove Local Styles

Since each variant can include local styling changes on top of the base theme, you may want to revert or remove these overrides.

To reset to a clean version of your base theme:

  1. Open the Switch theme menu.

  2. Select the base theme you'd like to use (this can be the same one currently applied).

  3. Enable the Remove local styles option.

  4. Click Switch.

This will discard any variant-specific styling changes and return the flow to the default look of the selected base theme.

The base theme will remain unchanged unless you explicitly a new version of it.

🎨
💡
publish