Appearance
Customize the look and feel of your feedback form
The Appearance tab lets you control how your feedback form looks and behaves. You can customize colors, positioning, display mode, and more. The tab is part of the feedback configuration panel alongside Form, Targeting, Triggers, and Advanced.
Overview
The Appearance settings let you align the feedback form with your brand and control how it behaves. You can match your brand colors in both light and dark mode, position the widget anywhere on the screen, and choose how the form appears when opened via shareable links. For advanced styling, add custom CSS to override defaults. You can also configure overlays, progress indicators, close buttons, and other UI options to fit your use case.
Color Options
Configure primary colors for both Light Mode and Dark Mode. Each option includes a color swatch, hex input, and copy button for the hex code. Use the information icon next to each label for more context on where that color is applied.
Brand Color
The main accent color used for buttons, links, and highlights throughout the form. 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 displayed on top of the brand color. This ensures readability when labels, icons, or other content sits on the brand color background. 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
The background color of cards and prominent UI blocks in the form. This defines the main surface on which form content sits. White (#FFFFFF) is common in light mode; dark grey (#242427) works well in dark mode.
Foreground Text
The primary text color for form content, including questions, labels, and body text. Use dark grey or black (e.g. #242427) in light mode and light grey or white (e.g. #FBFBFB) in dark mode for clear legibility.
Overlay
The color of the overlay that appears behind the form when it opens as a modal or popup. This layer sits between the form and the page content. White (#FFFFFF) in light mode and dark grey (#242427) in dark mode are typical choices.
Additional Theme Settings
Use the Additional Theme Settings button (gear icon) next to the Appearance tab to open the Advanced Color Settings modal. These variables control secondary UI elements, borders, and interactive states beyond the primary color options.
Secondary Color & Secondary Foreground
Secondary Color defines the background for secondary buttons, tabs, and other supporting elements. Light grey (#F6F6F7) in light mode and dark grey (#46464B) in dark mode are common. Secondary Foreground is the text or icon color on those backgrounds—typically your brand color in light mode and light grey in dark mode.
Muted & Muted Foreground
Muted is used for backgrounds of less prominent or disabled elements, such as placeholder areas or inactive UI. Muted Foreground applies to secondary text, hints, and captions. Use medium grey (#8C8C92) in light mode and lighter grey (#B3B3B8) in dark mode for clear hierarchy.
Accent & Accent Foreground
Accent defines the background for highlighted or active elements, such as selected items or hover states. Accent Foreground is the text or icon color on those backgrounds. These work together to indicate interactive or selected states.
Destructive & Destructive Foreground
Destructive is used for delete actions, error messages, and warnings. Red tones (#DC2626 in light mode, #EF4444 in dark mode) are standard. Destructive Foreground ensures text and icons remain readable on destructive backgrounds.
Border
The border color for form elements, containers, and dividers. Light grey (#EAEAEC) in light mode and dark grey (#46464B) in dark mode provide subtle separation without overwhelming the layout.
Input
The background color for text input fields, textareas, and similar form controls. This should provide enough contrast with the foreground text for comfortable reading and typing.
Ring
The color for focus rings or outlines that appear when users interact with form elements via keyboard or assistive technology. A distinct but subtle color helps users track focus without clashing with the overall theme.
Additional Settings
Custom CSS
Add a URL to an external CSS file to style your feedback form beyond the built-in options. Enter the full URL to your stylesheet (e.g. https://example.com/custom.css) in the input field. Your custom CSS will override default styles, so you can match your brand's typography, spacing, and visual language. Use the download icon next to the field to retrieve a template CSS file or export the currently linked stylesheet for reference.
Dark Overlay
When enabled, a semi-transparent dark overlay appears behind the form while it is open. This dims the background content and draws focus to the feedback form, which is especially useful when the form opens as a modal or popup. When disabled, the background remains visible. On native mobile apps, disabling this setting results in a blocker feedback popup with a transparent background overlay instead of a dimmed one.
Close Button
When enabled, users see a close button and can dismiss the widget at any time, even before completing the form. This gives respondents control over when to exit. When disabled, users must complete or navigate through the form to close it, which can increase completion rates but may feel restrictive in some contexts.
Progress Bar
When enabled, a progress bar appears during the form, showing how many questions remain. This helps respondents understand how much of the form is left and can reduce abandonment on longer surveys. When disabled, no progress indicator is shown.
encatch Branding
This setting controls whether "Powered by encatch" appears on your widget. A lock icon next to this option indicates that it may be fixed by your plan or permissions and cannot be changed in some cases.
Customize Position
When enabled, you can choose where the widget appears on the screen from a grid of position options. When disabled, the widget uses the default placement at the bottom right of the screen.
Widget Position Options
When Customize position is enabled, you can choose from these positions. Each option is shown as a small square with a dot indicating where the widget will appear.
| Position | Description |
|---|---|
| Top Left | Upper-left corner of the screen |
| Top Center | Centered along the top edge |
| Top Right | Upper-right corner of the screen |
| Center | Center of the screen (horizontal and vertical) |
| Bottom Left | Lower-left corner of the screen |
| Bottom Center | Centered along the bottom edge |
| Bottom Right | Lower-right corner (default) |
The bottom-right position is the default when customization is disabled, as it tends to be less intrusive for most layouts.
Shareable Mode
Display Mode for Shareable Link
When the feedback form is opened via a shareable link, this setting determines which theme is applied. Light forces the form to always use a light theme, regardless of the user's environment. Dark forces a dark theme. System lets the form follow the user's operating system or browser preference—if the user has dark mode enabled, the form will appear dark; otherwise it will appear light.
Device Mockup Images
Upload custom images for mobile, desktop, and tablet device mockups. Images are stored locally and replace the default mockup images used when presenting or sharing your feedback form. Each device type supports separate light and dark variants so you can match the form's theme.