Appearance

The Appearance tab lets you control how your feedback form looks and behaves. On desktop you get a left configuration column, a center preview, and an optional right layout editor when a section layout is selected. The tab is part of the feedback configuration panel alongside Form, Targeting, Triggers, and Advanced.

Appearance tab overview

Overview

Use Appearance to align the form with your brand: colors, typography (font family), custom CSS, and widget behavior for in-app and shareable experiences. Styling tokens and font live in the Theme sheet; toggles and dropdowns for overlay, chrome, position, and shareable options live in the Settings popover. The center preview shows your form in device frames; you can upload custom mockup images from the preview toolbar.

Documentation vs. earlier versions (layout)

Topic	Earlier Appearance docs / behavior	Current product
Where options live	One long scroll of settings (colors, then a combined "additional" block).	The left column uses a toolbar: Theme opens a sheet (colors, advanced colors, CSS, font). Settings opens a popover (overlay, buttons, branding, position, shareable options, RTL, and more).
Typography	Font changes were implied mainly through Custom CSS.	Font family is in the Theme sheet, below Custom CSS, using encatch-hosted fonts and a manifest key.
Widget position	Described as a grid of squares with a dot.	In app: Customize position is a dropdown in Settings (labels such as Top left, Default (bottom right), and so on).

Appearance tab layout

Left column — Configure
- Theme (palette icon): opens the Theme side sheet. This is where main colors, Additional Theme Settings (advanced colors dialog), Custom CSS, and Font family live.
- Settings (settings icon): opens the Settings popover with switches and selects for widget and shareable behavior (not colors or font).
- Below the toolbar: form configuration cards, other fields, and Section layouts (per-section media and layout).
Center — Preview
Live preview with device tabs, light/dark preview, language, and toolbar actions including Your screenshots (device mockup uploads).
Right — Layout editor (when active)
Appears when you pick a section or Defaults under Section layouts, to edit layout and media for that scope.

Theme (sheet)

Open Theme from the Appearance toolbar. The sheet title is Theme. Content appears in this order:

Main color table
Additional Theme Settings button (opens the advanced colors dialog)
Custom CSS
Font family

Color options - Light and Dark Mode

Colors (main table)

Primary colors use a table with Color option, Light mode, and Dark mode.

Choosing a color: Click the swatch and hex preview (monospace). A color picker opens in a popover; when you close the popover, the value is applied.
Copy: The copy control copies the hex value and shows brief confirmation.
Hints: The information icon next to each label opens a tooltip with usage notes.

Brand Color

The main accent color: it appears on primary actions (for example button backgrounds and key primary text). In light mode, choose a vibrant color (e.g. blue #3366CC) that stands out against light backgrounds. In dark mode, a lighter shade (e.g. #FBFBFB) works well for contrast on dark backgrounds.

Brand Color Foreground

The color of text or icons on top of the brand color. In light mode, use a light foreground (e.g. #FBFBFB) on a dark brand color; in dark mode, use a dark foreground (e.g. #3366CC) on a light brand color.

Background Card

Background color of cards and prominent UI blocks. White (#FFFFFF) is common in light mode; dark grey (#242427) works well in dark mode.

Foreground Text

Primary text color for questions, labels, and body text. Dark grey or black (e.g. #242427) in light mode; light grey or white (e.g. #FBFBFB) in dark mode.

Overlay

Color of the layer behind the form when it opens as a modal or popup. White (#FFFFFF) in light mode and dark grey (#242427) in dark mode are typical.

Additional Theme Settings (dialog)

Advanced Color Settings dialog

Still inside the Theme sheet: use the Additional Theme Settings outline button (with a settings icon) under the main color table. It opens Advanced Color Settings — a wide, scrollable dialog with the same three-column table and the same picker, copy, and info-tooltip behavior as the main colors.

Secondary Color & Secondary Foreground

Secondary Color is for secondary buttons, tabs, and supporting surfaces. Secondary Foreground is text or icons on those surfaces—often a strong dark (#000000) in light mode and light grey or white in dark mode.

Muted & Muted Foreground

Muted backs less prominent or inactive UI. Muted Foreground is for secondary text and hints. Medium grey (#8C8C92) in light mode and lighter grey (#B3B3B8) in dark mode are common.

Accent & Accent Foreground

Accent highlights selected or active elements. Accent Foreground is the text or icon color on those surfaces.

Destructive & Destructive Foreground

Destructive is for delete actions, errors, and warnings (red tones). Destructive Foreground keeps text and icons readable on those surfaces.

Border

Border color for elements, containers, and dividers.

Input

The input variable controls input-related border styling so fields stay consistent with the theme.

Ring

Focus ring or outline color for keyboard and assistive-tech focus.

Additional theme color options list

Custom CSS (Theme sheet)

Add the full URL to an external stylesheet (e.g. https://example.com/custom.css). Custom CSS overrides defaults for spacing, layout, and fine-grained rules. Use the download control next to the field for a template or export. This sits in the Theme sheet after the color controls.

Font family (Theme sheet)

Font family is below Custom CSS in the Theme sheet (not in Settings). It sets the form typeface from encatch-hosted web fonts (central font manifest).

Default: Built-in system or default stack (shown as the system default in the picker).
Other fonts: Each row is a manifest key, with metadata (weight/style for preview) and a live preview of the font name when the font loads.
Search and scroll: Use Search fonts..., scroll the list, and choose a row to apply (popover closes). Long lists load more as you scroll toward the bottom.
Saved value: The manifest key for the selected font (not a raw CSS font-family string). Keys removed from the catalog can still appear so your choice is preserved.
Errors: If the list fails to load, a short message may appear; the saved value remains.

Use the information icon next to Font family for the in-product note about hosted fonts and manifest keys.

Open Settings from the Appearance toolbar. A popover lists compact rows (switches and selects). These controls do not include colors, Custom CSS, or Font family — those stay in Theme.

Dark overlay

When enabled, a semi-transparent dark overlay appears behind the form while it is open. When disabled, the background stays visible. On native mobile apps, disabling this uses a blocker-style popup with a transparent overlay instead of a dimmed one.

Close button

When enabled, users can dismiss the widget with a close control before finishing the form. When disabled, they typically need to move through or complete the form to exit.

Progress bar

When enabled, a progress indicator shows how much of the form remains.

encatch branding

Controls whether Powered by encatch appears. A lock icon can indicate plan or permission limits.

Previous button

Select Always or Never to control whether a previous-step control is shown in the form flow.

Right-to-left (RTL)

When enabled, RTL layout applies for supported form languages (for example Arabic, Hebrew, Persian, Urdu). See the in-product help for the exact language list.

In app: Customize position

Dropdown for launcher placement in the host app. Default (bottom right) uses standard placement without custom positioning. Any other value turns on custom placement and sets the corner or edge.

Shareable mode

For forms opened via a shareable link, choose Light, Dark, or System. Light and Dark fix the theme; System follows the visitor operating system or browser light or dark mode.

Shareable Mode - Display mode options

Keyboard accessibility (shareable)

When enabled, respondents using a shareable link can use keyboard shortcuts (for example Enter to advance, Escape to dismiss) for basic navigation.

When In app: Customize position in Settings is not Default (bottom right), you are using custom placement. The control is a dropdown listing the placements below (the screenshot may show an older layout control, but the same corners and edges apply).

Customize position - Widget placement

Position (label)	Description
Top Left	Upper-left corner
Top Center	Top edge, centered
Top Right	Upper-right corner
Center	Center of the screen (horizontal and vertical)
Bottom Left	Lower-left corner
Bottom Center	Bottom edge, centered
Bottom Right	Lower-right corner

Default placement when not customizing is bottom right.

Preview panel and device mockups

The center preview toolbar includes light/dark toggles, device framing, language, and Your screenshots (upload icon) to open Upload Device Mockup Images.

Upload Device Mockup Images

Upload custom images for mobile, desktop, and tablet, each with light and dark variants. Images are stored locally (per project in the editor) and replace the default mockup artwork in the preview (and related preview flows).