Advanced Styles

The color, font, and radius options in Attributes cover most surveys, but not every case - sometimes you need pixel-level control over one specific button, a field's spacing, or the stepper dots between steps. Advanced Styles adds a single combined CSS editor to every survey for exactly that: real CSS, written once, applied on top of the widget's own default styles.

Open a survey, go to Surveys → Advanced Styles. Every block below is a normal CSS rule - edit any of them and the survey preview updates as you type, no save button needed (it saves the same way the rest of the survey does).

What you can style

The editor comes pre-filled with one empty block per part of the widget - just fill in declarations, or leave a block empty to leave that part untouched:

• Form title, form container, and the stepper (each dot, including the number inside it via :after).
• Buttons - one class shared by every button, plus a separate class for Previous, Next, and Submit individually, so you can style them all at once or one at a time.
• Every field's own container, label, error message, and input - either for every field of a given type at once (e.g. "every Textarea field"), or for one specific field by using its own .OivaFeedbackCustomClass__field__<fieldKey> selector, generated automatically for each field and shown in the editor.

Why it's safe

Every rule you write only ever affects that one survey (or that one field) - it can't leak into another survey embedded on the same page, and it can't affect anything else on the host site. This is enforced structurally (each rule is scoped to the survey/field it targets), not by restricting what CSS you're allowed to write.

Back to Survey creation · Attributes