Styling Surveys with Custom CSS
Updated
Custom CSS allows you to enhance a survey's standard visual design by incorporating CSS rules that supersede the default (OOTB) styles. This is useful when the existing styling options do not offer sufficient control over the survey's look.
The anticipated outcome is a more tailored, brand-consistent survey experience that fulfills advanced styling needs beyond the basic styling controls.
Business Use Cases
Align surveys with your brand identity by applying custom colors, fonts, and styling beyond the default design options.
Create tailored survey layouts by adjusting spacing, alignment, and component positioning to improve visual appeal.
Customize survey elements such as buttons, input fields, and progress indicators to match specific design requirements.
Deliver a unique respondent experience by implementing advanced styling that is not available through out-of-the-box survey settings.
Prerequisites
Custom CSS is available only for selected customers or environments.
Note: Access to this feature is controlled by a dynamic property (DP). To enable this feature in your environment, reach out to your Success Manager. Alternatively, you can submit a request at tickets@sprinklr.com.
Once enabled, you can access Custom CSS from the survey editor under Overall styling.
Accessing Custom CSS
Access a Survey and navigate to Survey Editor.
Go to Overall Styling.
Select Custom CSS in the top-right corner.
Write CSS in the editor
Custom CSS opens a simple code editor on the right side of the screen.
Enter or update CSS rules in the editor.
Use the provided OOTB selectors to target common survey components. (selectors list provided in this article)
Preview CSS Changes
A live survey preview appears on the left.
Select Update Preview to apply the latest CSS changes to the preview.
Preview updates do not apply the styling to the live survey.
Review key states such as questions, buttons, validation messages, navigation, and responsive behaviour.
Note:
Preview workflow: Select Update Preview to apply your latest CSS changes to the preview. Preview updates do not apply the styling to the live survey.
Apply Workflow: Select Apply to apply added Custom CSS to your survey. These changes will not be visible in regular builder state. Users can go to Survey Preview on top right to view those changes.
Styling Override: If changes done using OOTB styling options do not reflect in draft survey, check if Custom CSS is applied on that component. Since Custom CSS overrides OOTB styling, this can happen.
Users Supported selectors
Custom CSS provides OOTB selectors that make it easier to target common survey components.
Use supported selectors for layouts, pages, questions, answer components, rating widgets, MCQ options, text fields, NPS, CSAT, matrices, audio/video cards, headers, footers, progress bars, branding, and special pages.
Denied pseudo-classes
(
:…):
:nth-last-child:first-of-type:last-of-type:nth-of-type:nth-last-of-type:only-child:only-of-type:empty:root:has:not:is:where
Denied pseudo-elements
(
::…):
::first-line::first-letter
Applying styling to the survey
When the preview matches the intended design, select Apply to apply the Custom CSS to the survey.
Update Preview refreshes only the editor preview.
Apply saves the styling for the survey and makes it part of the survey configuration.
Note:
Apply is not the same as Update Preview: Update Preview refreshes the editor preview. Apply saves the styling for the survey and makes it part of the survey configuration.
Custom CSS changes will not reflect in the builder left pane once Custom CSS Pane is closed. Users can go to Survey Preview on the top right to view the exact survey UI.
How to use it?
Open the survey editor.
Go to Overall styling.
Select Custom CSS from the top-right corner.
Add or update CSS rules in the editor.
Select Update Preview to review the changes in the preview pane.
Validate key survey states, including question display, answer controls, navigation buttons, validation messages, and responsive views.
When the preview matches the intended design, select Apply.
Use Survey Preview to verify the exact survey UI after closing the Custom CSS pane.
Validation and testing
Preview CSS changes: Use Update Preview to confirm that the CSS renders as expected before applying it.
Validate core survey UI: Check the overall layout, typography, colours, spacing, question cards, answer controls, page controls, headers, footers, branding, and progress bar.
Test important states: Verify normal, hover, focus, disabled, error, validation, navigation, and completion states where applicable.
Check responsive behaviour: Test desktop and mobile views, or the screen sizes used by respondents.
Validate after applying: Select Apply, then open Survey Preview to confirm the final survey UI.
Conduct post-release validation: After every product release, verify that the Custom CSS still works as expected and that nothing has broken in the live survey.
Post Release Validation checklist
Confirm the live survey loads correctly.
Check the overall layout, typography, colours, spacing, and controls.
Test desktop and mobile or responsive views.
Verify navigation, validation messages, and completion behaviour.
Confirm that no custom rule causes content to be hidden, misaligned, or inaccessible.
Note: Include post-release validation as part of your Custom CSS maintenance process. After each release, verify that your survey styling works as expected. If any custom styles are impacted, update or remove the conflicting CSS rules and reapply the corrected styling.
Key points to note
Custom CSS is not available for general use and must be enabled only for selected customers or environments.
Preview updates do not apply styling to the live survey. Users must select Apply to save the styling into the survey configuration.
Custom CSS changes will not reflect in the builder left pane once the Custom CSS pane is closed. Use Survey Preview from the top right to view the exact survey UI.
Some pseudo-classes and pseudo-elements are denied and cannot be used.
Custom CSS overrides OOTB styling, so future product releases can affect existing rules. Post-release validation is required.
Best Practices
Change only what is needed: Override specific properties instead of rewriting broad sections of the OOTB styling.
Use supported selectors: Prefer the provided selectors for common components to reduce the risk of styling unrelated elements.
Keep selectors specific: Avoid broad CSS selectors that may unintentionally affect multiple components or layouts.
Check responsive behaviour: Review the survey at the screen sizes used by respondents.
Test important states: Verify normal, hover, focus, disabled, error, and validation states where applicable.
Document intentional overrides: Add comments or maintain a separate record of custom rules and their purpose.
Validate after releases: Because Custom CSS overrides OOTB styling, product changes can affect existing CSS rules.