Styling Surveys with Custom CSS
Updated
Custom CSS gives you greater control over the visual appearance of your surveys by allowing you to apply custom styling beyond the standard design options. By using CSS rules to override out-of-the-box survey styles, you can customize layouts, colors, fonts, spacing, and other design elements to create a survey experience that aligns with your brand and specific presentation requirements.
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.
Accessing Custom CSS
Access a Survey and navigate to Survey Editor.
Go to Overall Styling.
Select Custom CSS in the top-right corner.
Note:
Custom CSS opens a simple code editor on the right side of the screen. A live survey preview appears on the left.
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.
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.
Writing and previewing CSS
CSS Editor
Enter or update your custom CSS rules in the editor.
Use the provided out-of-the-box (OOTB) selectors to quickly target commonly used survey components.
Apply specific and well-scoped selectors to ensure styling changes affect only the intended elements.
Survey Preview
View your survey in real time to see how custom styles are applied.
Select Update Preview after making changes to refresh the survey preview.
Validate the appearance of key survey elements, including questions, buttons, navigation controls, and validation messages, to ensure a consistent respondent experience.
Supported selectors
Selector reference:
// Shared hook present on every survey fill layout root SURVEY_SHELL: 'cfm-survey-shell', // Branding bar SURVEY_BRANDING_CONTAINER: 'cfm-survey-branding-container', // Normal (default) fill layout — DefaultLayout.tsx NORMAL_LAYOUT: 'cfm-normal', NORMAL_INNER: 'cfm-normal-inner', NORMAL_BODY: 'cfm-normal-body', NORMAL_PROGRESS: 'cfm-normal-progress', NORMAL_CONTENT: 'cfm-normal-content', NORMAL_MAIN: 'cfm-normal-main', NORMAL_PRIVACY: 'cfm-normal-privacy', // Presentation fill layout — PresentationLayout.tsx PRES_LAYOUT: 'cfm-pres', PRES_BODY: 'cfm-pres-row', PRES_PROGRESS: 'cfm-pres-progress', PRES_CONTENT: 'cfm-pres-column', PRES_MAIN: 'cfm-pres-pages', PRES_BANNER: 'cfm-pres-banner', PRES_PRIVACY: 'cfm-pres-privacy', // Normal page layout — NormalPageLayout.tsx NORMAL_PAGE: 'cfm-normal-page', NORMAL_PAGE_TITLE: 'cfm-normal-page-title', NORMAL_PAGE_CARD: 'cfm-normal-page-card', NORMAL_PAGE_BODY: 'cfm-normal-page-body', NORMAL_PAGE_LANGUAGE: 'cfm-normal-page-lang', NORMAL_PAGE_LANGUAGE_INPUT: 'cfm-normal-page-lang-input', NORMAL_PAGE_MAIN: 'cfm-normal-page-main', NORMAL_PAGE_BRANDING: 'cfm-normal-page-branding', // Presentation page layout — PresentationPageLayout.tsx PRES_PAGE: 'cfm-pres-page', PRES_PAGE_CONTAINER: 'cfm-pres-page-wrap', PRES_PAGE_TITLE: 'cfm-pres-page-title', PRES_PAGE_CARD: 'cfm-pres-page-card', PRES_PAGE_LANGUAGE: 'cfm-pres-page-lang', PRES_PAGE_LANGUAGE_INPUT: 'cfm-pres-page-lang-input', PRES_PAGE_MEDIA: 'cfm-pres-page-media', PRES_PAGE_SCROLL: 'cfm-pres-page-scroll', PRES_PAGE_MAIN: 'cfm-pres-page-questions', PRES_PAGE_TRANSITION: 'cfm-pres-page-slide', PRES_PAGE_BODY: 'cfm-pres-page-content', PRES_PAGE_CENTER: 'cfm-pres-page-preview', PRES_PAGE_CONTROLS: 'cfm-pres-page-nav', PRES_PAGE_CONTROLS_INNER: 'cfm-pres-page-nav-inner', PRES_PAGE_BRANDING: 'cfm-pres-page-branding', // Shared, view-agnostic content hooks SURVEY_QUESTIONS: 'cfm-survey-questions', SURVEY_EMPTY: 'cfm-survey-empty', // Survey page SURVEY_PAGE_CONTROLS: 'cfm-survey-page-controls', // Page controls footer wrapper SURVEY_PAGE_CTA: 'cfm-survey-page-cta', // Base class on every page CTA button SURVEY_PAGE_CTA_BACK: 'cfm-survey-page-cta-back', // Previous/back page CTA SURVEY_PAGE_CTA_NEXT: 'cfm-survey-page-cta-next', // Next page CTA SURVEY_PAGE_CTA_SUBMIT: 'cfm-survey-page-cta-submit', // Submit survey CTA // Survey question SURVEY_QUESTION: 'cfm-survey-question', // Question card container SURVEY_QUESTION_HEADER_CONTAINER: 'cfm-survey-question-header-container', // Question header block SURVEY_QUESTION_TITLE: 'cfm-survey-question-title', // Question title text SURVEY_QUESTION_DESCRIPTION: 'cfm-survey-question-description', // Question description SURVEY_QUESTION_MEDIA_CONTAINER: 'cfm-survey-question-media-container', // Question media slot SURVEY_QUESTION_ATTACHMENT_CONTAINER: 'cfm-survey-question-attachment-container', // Question attachment slot SURVEY_QUESTION_ANSWER_CONTAINER: 'cfm-survey-question-answer-container', // Question answer slot SURVEY_QUESTION_NA: 'cfm-survey-question-na', // Shared rating widgets (NPS + CSAT + Rating) SURVEY_RATING_CONTAINER: 'cfm-survey-rating-container', // Root container for shared star/emoji/numbered/radio rating widgets. SURVEY_RATING_CONTAINER_MOBILE: 'cfm-survey-rating-container-mobile', // Root container for shared star/emoji/numbered/radio rating widgets on mobile. SURVEY_RATING_ITEM: 'cfm-survey-rating-item', // Individual rating option/item wrapper. SURVEY_RATING_STAR: 'cfm-survey-rating-star', // Star mark within a rating item. SURVEY_RATING_EMOJI: 'cfm-survey-rating-emoji', // Emoji mark within a rating item. SURVEY_RATING_NUMBERED: 'cfm-survey-rating-numbered', // Numbered button mark within a rating item. SURVEY_RATING_RADIO: 'cfm-survey-rating-radio', // Radio mark within a rating item. // MCQ SURVEY_MCQ_CONTAINER: 'cfm-survey-mcq-container', // MCQ answer root container. SURVEY_MCQ_LIST: 'cfm-survey-mcq-list', // MCQ options list/grid container. SURVEY_MCQ_OPTION: 'cfm-survey-mcq-option', // Single MCQ option wrapper. SURVEY_MCQ_OPTION_LABEL: 'cfm-survey-mcq-option-label', // MCQ option label text. SURVEY_MCQ_OPTION_IMAGE: 'cfm-survey-mcq-option-image', // MCQ option image media. SURVEY_MCQ_OTHER: 'cfm-survey-mcq-other', // MCQ "Other" option row. SURVEY_MCQ_OTHER_LABEL: 'cfm-survey-mcq-other-label', // MCQ "Other" option label text. SURVEY_MCQ_DROPDOWN: 'cfm-survey-mcq-dropdown', // MCQ dropdown control root. // TextField SURVEY_SHORT_TEXTFIELD_CONTAINER: 'cfm-survey-short-textfield-container', // Short TextField answer root container. SURVEY_LONG_TEXTFIELD_CONTAINER: 'cfm-survey-long-textfield-container', // Long TextField answer root container. SURVEY_TEXTFIELD_INPUT: 'cfm-survey-textfield-input', // TextField single-line input. SURVEY_TEXTFIELD_TEXTAREA: 'cfm-survey-textfield-textarea', // TextField multi-line textarea. SURVEY_TEXTFIELD_PHONE_INPUT: 'cfm-survey-textfield-phone-input', // TextField phone input. SURVEY_TEXTFIELD_DATE_INPUT: 'cfm-survey-textfield-date-input', // TextField date input. // NPS SURVEY_NPS_CONTAINER: 'cfm-survey-nps-container', // NPS answer root container. SURVEY_NPS_HINT_TEXTS: 'cfm-survey-nps-hint-texts', // NPS endpoint hint texts container. SURVEY_NPS_HINT_TEXT: 'cfm-survey-nps-hint-text', // NPS question hint text. // CSAT SURVEY_CSAT_CONTAINER: 'cfm-survey-csat-container', // CSAT answer root container. SURVEY_CSAT_VERTICAL_ROW: 'cfm-survey-csat-vertical-row', // CSAT vertical statement row. SURVEY_CSAT_VERTICAL_STATEMENT_LABEL: 'cfm-survey-csat-vertical-statement-label', // CSAT vertical statement label text. SURVEY_CSAT_HINT_TEXTS: 'cfm-survey-csat-hint-texts', // CSAT endpoint hint texts container. // Rating question type SURVEY_RATING_MATRIX_CONTAINER: 'cfm-survey-rating-matrix-container', // Rating matrix (multi-row) root. SURVEY_RATING_ROW: 'cfm-survey-rating-row', // Rating matrix row. SURVEY_RATING_HINT_TEXTS: 'cfm-survey-rating-hint-texts', // Rating endpoint hint texts container. SURVEY_RATING_SLIDER: 'cfm-survey-rating-slider', // Rating graphic-slider presentation. // Slider SURVEY_SLIDER_CONTAINER: 'cfm-survey-slider-container', // Slider answer root container. SURVEY_SLIDER_LABELS: 'cfm-survey-slider-labels', // Slider labels row. SURVEY_SLIDER_LABEL: 'cfm-survey-slider-label', // Individual slider label. SURVEY_SLIDER_NA_CONTAINER: 'cfm-survey-slider-na-container', // Slider N/A container. // Matrix SURVEY_MATRIX_CONTAINER: 'cfm-survey-matrix-container', // Matrix answer root container. SURVEY_MATRIX_HEADER: 'cfm-survey-matrix-header', // Matrix column header row. SURVEY_MATRIX_HEADER_CELL: 'cfm-survey-matrix-header-cell', // Matrix header cell. SURVEY_MATRIX_COL_LABEL: 'cfm-survey-matrix-col-label', // Matrix column label. SURVEY_MATRIX_ROW: 'cfm-survey-matrix-row', // Matrix data row. SURVEY_MATRIX_ROW_MOBILE: 'cfm-survey-matrix-row-mobile', // Matrix data row on mobile. SURVEY_MATRIX_ROW_LABEL: 'cfm-survey-matrix-row-label', // Matrix row label. SURVEY_MATRIX_CELL: 'cfm-survey-matrix-cell', // Matrix cell. SURVEY_MATRIX_CELL_MOBILE: 'cfm-survey-matrix-cell-mobile', // Matrix cell on mobile. SURVEY_MATRIX_RADIO: 'cfm-survey-matrix-radio', // Matrix radio input in a cell. SURVEY_MATRIX_NA_CONTAINER: 'cfm-survey-matrix-na-container', // Matrix N/A container. SURVEY_MATRIX_HINT_TEXTS: 'cfm-survey-matrix-hint-texts', // Matrix endpoint hint texts container. SURVEY_MATRIX_HINT_TEXT: 'cfm-survey-matrix-hint-text', // Individual matrix hint text. // Audio / Video SURVEY_AUDIO_VIDEO_CARDS_CONTAINER: 'cfm-survey-audio-video-cards-container', // Wrapper around the audio/video record and file upload cards. SURVEY_AUDIO_VIDEO_CARD: 'cfm-survey-audio-video-card', // Record and file upload cards in the audio/video answer. SURVEY_AUDIO_VIDEO_CARD_ICON: 'cfm-survey-audio-video-card-icon', // Icon inside the audio/video record and file upload cards. SURVEY_AUDIO_VIDEO_CARD_TITLE: 'cfm-survey-audio-video-card-title', // Title text inside the audio/video record and file upload cards. SURVEY_AUDIO_VIDEO_CARD_DESCRIPTION: 'cfm-survey-audio-video-card-description', // Description text inside the audio/video record and file upload cards. // Survey Header SURVEY_HEADER_CONTAINER: 'cfm-survey-header-container', SURVEY_HEADER_CONTENT: 'cfm-survey-header-content', SURVEY_HEADER_BANNER: 'cfm-survey-header-banner', SURVEY_HEADER_LOGO: 'cfm-survey-header-logo', SURVEY_HEADER_TITLE: 'cfm-survey-header-title', SURVEY_HEADER_DESCRIPTION: 'cfm-survey-header-description', // Progress bar SURVEY_PROGRESS_BAR: 'cfm-survey-progress', SURVEY_PROGRESS_BAR_LABEL: 'cfm-survey-progress-label', SURVEY_PROGRESS_BAR_TRACK: 'cfm-survey-progress-track', SURVEY_PROGRESS_BAR_FILL: 'cfm-survey-progress-fill', SURVEY_PROGRESS_BAR_STEPS: 'cfm-survey-progress-steps', SURVEY_PROGRESS_BAR_STEP: 'cfm-survey-progress-step', SURVEY_PROGRESS_BAR_CONNECTOR: 'cfm-survey-progress-connector', // Survey Footer SURVEY_FOOTER_CONTAINER: 'cfm-survey-footer-container', SURVEY_FOOTER_CONTENT: 'cfm-survey-footer-content', SURVEY_FOOTER_LOGO: 'cfm-survey-footer-logo', SURVEY_FOOTER_TEXT: 'cfm-survey-footer-text', SOCIAL_CHANNEL_LIST: 'cfm-social-channel-list', // Special pages (intro, end, paused, submitted, expired, quota fulfilled) SURVEY_SPECIAL_PAGE_CONTAINER: 'cfm-survey-special-page-container', SURVEY_SPECIAL_PAGE: 'cfm-survey-special-page', SURVEY_SPECIAL_PAGE_CARD: 'cfm-survey-special-page-card', SURVEY_SPECIAL_PAGE_BODY: 'cfm-survey-special-page-body', SURVEY_SPECIAL_PAGE_CONTENT: 'cfm-survey-special-page-content', SURVEY_SPECIAL_PAGE_HEADER: 'cfm-survey-special-page-header', SURVEY_SPECIAL_PAGE_DESCRIPTION: 'cfm-survey-special-page-description', SURVEY_SPECIAL_PAGE_MEDIA_CONTAINER: 'cfm-survey-special-page-media-container', SURVEY_SPECIAL_PAGE_FILES_CONTAINER: 'cfm-survey-special-page-files-container', SURVEY_SPECIAL_PAGE_CTA: 'cfm-survey-special-page-cta', SURVEY_SPECIAL_PAGE_CTA_START: 'cfm-survey-special-page-cta-start', SURVEY_SPECIAL_PAGE_CTA_REDIRECT: 'cfm-survey-special-page-cta-redirect', SURVEY_SPECIAL_PAGE_BUTTON_OPTIONS: 'cfm-survey-special-page-button-options', SURVEY_SPECIAL_PAGE_BUTTON_OPTION: 'cfm-survey-special-page-button-option',} as const;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.
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.
Important Note for post release validations:
- Custom CSS overrides the default survey styling. Product updates may affect existing custom CSS rules, so it is recommended to review your survey after each release.
- Verify that the live survey loads and renders correctly across all supported devices and browsers.
- Review the overall layout, typography, colors, spacing, and interactive elements to ensure the intended design is maintained.
- Test both desktop and mobile experiences, including responsive behavior.
- Validate survey navigation, validation messages, and completion flows to ensure a seamless respondent experience.
- Confirm that custom CSS does not hide content, cause alignment issues, or impact the accessibility of survey elements.
- Treat post-release validation as part of maintaining Custom CSS. If the live survey is affected, update or remove the conflicting rule and reapply the corrected styling.
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.
Check responsive behavior: 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.