Custom CSS styling
The built-in survey elements, such as rating scales and text fields, have styling attributes applied including background color, background image, text and button colors, and fonts. Use CSS to override these styling attributes to match specific requirements. Within Digital, the overriding CSS is referred to as custom CSS.
The custom CSS can change existing properties including font type, question spacing, rounded corners, dynamic dimensions for devices, and score design. CSS can also add new styling properties. To a very limited degree, CSS can also be used to add content to a survey. It is important to consider how these changes will affect customers on any device or browser type and ensure a consistent user experience.
Responsive design (the survey's ability to display and automatically adjust for different-sized screens on any device) is not automatic and may require additional CSS rules that are not documented here. Contact your Medallia expert for assistance if you need styling that requires responsive design.
When not to use CSS
Before customizing CSS for your surveys, don't forget that the Digital Command Center provides many options for customizing the look and feel of your surveys without the need for custom CSS. The following examples illustrate ways of customizing surveys without CSS.
For example, CSS is not necessary for styling Next, Back, and Submit buttons. Change the text, background color, and text color for a button using the options on the Basic Settings tab of Form Settings.
Survey background and text color
Change the survey background color, text color, or upload an image to be used on the background of the survey using the options of the Form Design tab of Form Settings.
Survey page background color
Change the background color of a specific page of a survey on the Page Settings tab in survey editor.
