Assets

General styling to make your questions responsive to user interaction.

There are a growing number of components available in the Formsort studio, most of which are likely to draw their styling from assets like Buttons, Input boxes, and Menus (a la the dropdown). These asset styles can be defined in the Theme section, and map on to different content types to ensure a consistent design system across your flow. For example, defining styling on your Input asset will give your Address component the same look and feel as your Email component, since both use Input boxes to collect information.

The Formsort Theme tab is UI that works as a thin layer on top of CSS, and will translate your inputs into CSS styling for your flow. Familiarity with website design is helpful, but not required!

User Interaction (UI) States

the UI state of an asset or component defines what it will look like in various scenarios, like a Next button when it's hovered over. These states can be customized to create a feeling that the flow is responding to user interaction.

Here is a helpful table that shows the different UI states that can be customized.

UI stateDescription

default

No user interaction has happened.

disabled

The button is disabled (e.g., cannot continue, or a choice is disabled).

checked

User has selected this choice. Only available on select buttons and their variations.

focused

The user has tabbed or otherwise focused the button.

hover

The user's cursor is over the button.

This will not be seen by mobile responders, as there is not an equivalent to hover on mobile phones.

See our CSS Reference section for an overview of the CSS properties that can be applied to various assets and components.

See the following sections for more insight into components and how they can be used.

Last updated