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
  • Guide for use
  • Targeting specific groups and steps
  • Classname reference
  • Step layout Overrides
  • Question and Component Overrides
  • Comparison cards
  • Dividers
  • Select component

Was this helpful?

  1. Building flows
  2. Styling and themes

Custom CSS overrides

Using CSS directly to style form layout and components

PreviousOverriding theme stylingNextContent area

Last updated 8 months ago

Was this helpful?

The style settings available within the theme editor are mostly simple wrappers around the CSS properties that are applied to the HTML elements rendered by Formsort. In simple terms, the options you see in the theme editor are easy-to-use controls for changing the appearance of your forms.

If you'd prefer to use CSS syntax directly to style your forms, you can do so by heading to Theme > General > Content area > Custom CSS and entering valid CSS rules there.

CSS overrides are an escape hatch! Please use our theme editor tools as much as possible.

Guide for use

Targeting specific groups and steps

You should first add ids to the steps and groups you want to customize - see our and documentation for more details.

After setting ids, you can use data-current-step-id and data-current-group-id attributes to target those steps and groups:

[data-current-group-id="contact details"] .fs__inputInner {
  border-radius: .5em;
}

[data-current-step-id="final step"] h2 {
  font-weight: bold;
}

Targeting components

When writing custom CSS rules, please use the supported classnames listed in the section below to target specific component types and their elements.

  • Don't use random-seeming classnames or IDs you may find within the Formsort HTML structure. These should be considered implementation details and are subject to change at any time.

  • Don't use highly-nested selectors. We may, from time to time, change the DOM structure of layouts and components. Highly-nested selectors are brittle and subject to breaking when this happens.


Classname reference

Step layout Overrides

.fs__stepContent

This component is the container that wraps step content, question and informational blocks. It is a good choice to override some alignment, padding and font properties that effect whole step.

For example, if you want to change color of labels in a step, you could use this snippet.

.fs__stepContent label {
    color: cornflowerblue;
}

You should not override background color or image in this class name. As you can see in the image below, it can have margins around. We'll add fs__step later so that you can override the whole page styles.


Question and Component Overrides

Comparison cards

.fs__comparison-question

Targets the comparison card div. Can be used to set the alignment and justification of the comparison cards in their row.

.fs__comparisonCard

Targets the comparison card container. You can set overrides for components within the card such as font, alignment etc. Also you can use this class name to set gradient backgrounds and adjust positioning like margins and paddings.

The card content consists of 3 parts: title, body, and action containers:

  • .fs__comparisonCardTitle to style title section.

  • .fs__comparisonCardBody to style body section.

  • .fs__comparisonCardAction to style action button section.

To customize highlighted and selected states, you can use .fs__highlighted and .fs__selected class names, e.g.

.fs__comparisonCard.fs__selected .fs__comparisonCardBody {
    font-weight: bold;
}

Dividers

.fs__divider

You can set divider color with background-color, height, margins, etc.


Select component

Buttons

.fs__sb-container

Targets the entire Select component wrapper. The Select button container uses the display: flex property to order the container.

  • Use to style all select questions that are using buttons.

.fs__sb-checkmark

Use this to target select buttons that use checkmarks.

.fs__sb-image

Use this to target select buttons that use images.

Dropdowns

When a select question is turned into a dropdown, the dropdown will consist of 3 parts: container, list, and list items.

You can use .fs__dropdown-container to apply style overrides to both input and list, such as text alignment and font style. To drill down to the dropdown list and items, you can use .fs__dropdown-list and .fs__dropdown-list-item.

.fs__dropdown-container {
    font-weight: bold;
    text-align: center;
}

.fs__dropdown-list {
    margin-top: 24px; /* more space between input and list */
    background-color: lightyellow;
}

.fs__dropdown-list-item {
    margin-bottom: 8px;
    padding: 4px 8px;
}

.fs__dropdown-container

.fs__dropdown-list

.fs__dropdown-list-item

To customize highlighted, selected and disabled styles of list items, you can use common Formsort class names: .fs__highlighted, .fs__selected and .fs__disabled.

.fs__dropdown-list-item.fs__highlighted {
    border-color: deepskyblue;
}

.fs__dropdown-list-item.fs__selected {
    background-color: mediumpurple;
    color: white;
}

Text inputs

For most of input styles you can use .fs__inputInner. Use .fs__inputWrapper for margins and widths.

.fs__inputInner {
    background-color: aquamarine;
    padding: 8px;
    ...
}

.fs__inputWrapper {
    margin-bottom: 16px;
    max-width: 80%;
}

For input prefixes and suffixes, you can use .fs__inputPrefix and .fs__inputSuffix.

.fs__inputPrefix {
    padding-right: 24px;
}

.fs__inputSuffix {
    font-style: italic;
}

Just like in plain CSS, you can use pseudo-classes to customize input states like focus, hover, disabled and invalid.

.fs__inputInner:hover, .fs__inputInner:focus {
    background-color: purple;
}

.fs__inputInner:invalid {
    background-color: rgba(255, 0, 0, .2);
}

Use to override the layout of a specific Select question (in conjunction with ).

๐Ÿ—๏ธ
step id
group id
Class Reference
step targeting
Comparison card sections