Skip to main content
Website & App Surveys render inside your page, in an element with the id fbjs. Your page’s CSS and the survey’s CSS meet there. This page explains how to keep them apart.
To style the survey itself, use Custom CSS in Formbricks. It applies wherever the survey is shown, including link surveys and mobile apps, it wins over the built-in survey styles, and it comes with stable hooks for buttons, choices, fields and more.

​
Keep Your Page CSS Out Of The Survey

The survey’s built-in styles are protected against many global rules, but broad rules can still reach the survey, especially with !important: * { font-size: 12px !important; } or button { background: red !important; }. If one of your rules changes the survey, exclude the survey from it:
globals.css

​
Styling The Survey From Your Page CSS

You can still style Website & App Surveys from your own stylesheet, but Custom CSS is the better place:
  • Your page CSS only reaches surveys on your pages, not link surveys or surveys in mobile apps.
  • Many built-in survey styles sit in cascade layers and win over your page CSS, even with !important. Custom CSS is placed above them and always wins.
If you style the survey from your page anyway, target only the supported contract: the data-fb-part hooks, their states and the --fb-* variables. Always scope rules under #fbjs.
globals.css
Generated class names such as .button-custom, .label-headline or .bg-input-bg are implementation details. They are not supported selectors and can change in any release.

​
Troubleshooting

My page styles change the survey
  • Find the rule in the browser inspector and exclude the survey with :not(#fbjs *).
My survey styles affect the rest of my page
  • A selector is missing #fbjs. Prefix every survey rule with it, or move the rules to Custom CSS, where scoping is automatic.
Changes do not show up
  • Hard refresh the page to clear cached SDK files.