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
  • Navigation sidebar
  • Allow access to future steps
  • Show disabled steps as read-only
  • Action Bar
  • Footer

Was this helpful?

  1. Building flows
  2. Styling and themes

Content area

From the Content tab, you can set overall form styles as well as a Favicon for your flow.

PreviousCustom CSS overridesNextAnimations and transitions

Last updated 2 years ago

Was this helpful?

The top section of the Content page has many styling options for the Content section of the flow. The Content section is where the flow's steps will reside.

In the Content menu, a favicon can be set for when the page is deployed, values can be adjusted, a background color set, and Content column and text horizontal positioning can be aligned. A can be set to create the width of the Content section, and the vertical alignment of the section can be adjusted as well.

See our section for an overview of the CSS properties available for customization in the first section of the Content page.

Navigation sidebar

If Show navigation sidebar is enabled in the Content section, then a table of contents-style element will be added to the left side of responder flows. This allows responders to see the groups and steps that the flow contains. The sidebar also allows responders to easily navigate back to steps that they have already completed.

As of November, 2022, it is not yet possible to style the navigation sidebar.

Allow access to future steps

If this toggle is enabled, responders will be able to access future steps that they logically have not encountered yet.

Show disabled steps as read-only

If this toggle is enabled, responders will be able to view future steps that they logically have not encountered yet, but they will not be able to provide a response until the valid condition has been met.

This is helpful if you would like responders to navigate freely, but do not want invalid answers from being submitted.

Action Bar

Footer

Show cookie management link?

When this is toggled on, Osano will be loaded (if your security policy uses it) and a cookie management link will be included in the footer of the flow. If Osano isn't used Formsort will save local data.

Loading indicator image

This option allows you to set an image to while a flow page is loading.

Show all steps inline

Use this option if you'd like the flow to appear as a long, unbroken vertical list. The opacity of the inactive steps can be set, so the user knows which step they are on

This feature is still in Beta.

You can apply styling to the Action Bars, such as setting a background color and creating a bar shadow, which creates the same effect as .

The footer section provides styling options for background color, , and vertical positioning above or below the bottom action bar.

๐Ÿ—๏ธ
box shadow
padding
Padding
max width
CSS Reference
The Content section of a flow
The top, inline (middle), and bottom Action Bars