Custom Styling

​

Overwrite Styling Theme

1. In the Survey Editor of the survey you want to style, open the Styling tab. The four sections below are greyed out. Until you override it, this survey follows the workspace theme.
2. Switch on Add custom styles. The sections become editable, and every change applies to this survey alone.
   • Survey styling — question text, descriptions and input fields.
   • Card styling — the card the survey sits on.
   • Background styling — a colour, an image or an animation behind it.
   • Logo settings — whether the workspace logo shows on this survey.
3. Hit Save. To change the theme for every survey instead, use Styling Theme.

​

Overwrite CSS Styles for App & Website Surveys

/* Overwrite Formbricks default styles */
--fb-brand-color: red;
--fb-brand-text-color: white;
--fb-border-color: green;
--fb-border-color-highlight: rgb(13, 13, 12);
--fb-focus-color: red;
--fb-heading-color: yellow;
--fb-subheading-color: green;
--fb-info-text-color: orange;
--fb-signature-text-color: blue;
--fb-survey-background-color: black;
--fb-accent-background-color: rgb(13, 13, 12);
--fb-accent-background-color-selected: red;
--fb-placeholder-color: white;
--fb-rating-fill: rgb(13, 13, 12);
--fb-rating-hover: green;
--fb-back-btn-border: blue;
--fb-submit-btn-border: transparent;
--fb-rating-selected: black;