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
  • Starter themes
  • Base themes
  • Switching themes
  • Publishing themes

Was this helpful?

  1. Building flows

Styling and themes

Customize the look and feel of your flows.

PreviousRedirectsNextCSS Reference

Last updated 11 months ago

Was this helpful?

Within the Theme tab of a flow, you can specify the underlying style settings of a flow. There you can define a consistent design system that will be used throughout the flow.

Starter themes

Formsort comes loaded with some great starter themes, which you will find in the course of making your first flow, or while making a new flow. These can be used as a basis for developing the perfect base theme for your own flows.

Base themes

Any changes you make to style properties located in the Theme tab will be a -specific overlay to the base theme that the variant uses. This means that the changes made will be local to the variant, and the base theme will remain unaffected until a new version is . This allows you to make style tweaks to different variants, while keeping your base theme untouched for other variants to use.

Switching themes

To switch the base theme of a flow, navigate to the Theme tab of a , and click Switch... in the upper-right hand corner of the page.

Once there, you can apply any base theme you've created to the variant, or switch to one of the starter themes Formsort provides.

Remove local styles?

As stated above, any changes made to style settings in the Theme tab are an overlay to the Base Theme, meaning the changes made in Theme will only affect the variant you are currently in.

When in the Switch theme menu, you can opt to remove this local styling by enabling Remove local styles, choosing the theme you want, and clicking Switch.

Remove local styles can also be used when you'd like to revert to the base theme you were using, before you started making modifications to styling. Simply click Switch... and choose the Theme you are currently using, and enable the "remove local styles" flag. This effectively resets local style changes.

Publishing themes

Publishing a new theme

Once you have created all the styling you need in the Theme tab, you can publish this as a new base theme. Click Save... in the top-right corner of the Theme tab, and choose Save as a new workspace theme. Give it the theme a name, then Save!

Updating a theme

To Publish an update to one of your base themes, click Save... in the top-right corner of the Theme tab and choose Publish an update to [variant-name].

๐Ÿ—๏ธ
variant
variant
published