Modifying survey form look and feel

Examples of how to modify the look and feel of surveys using the Digital survey form 2.0, based on our predefined CSS Variables and Classes.

Primary color

Digital survey form 2.0 makes it easier to maintain your stylesheet by allowing you to define a primary color once, and then reusing it across your CSS instead of using specific color definitions.

To set up a primary color, add this snippet to the top of your custom CSS file:

:root { --palette-core-primary: #4050C6; }

The --palette-core-primary predefined variable configures these styles:

the selected component state background color for group components such as checkbox or radio button
the selected component state, for the background color of the element
hover or focus component state, for the border of the highlighted element

Setting the the primary color using --palette-core-primary configures the default value for these variables:

--palette-action-hover is the box-shadow color upon focus or hover of an element
--palette-action-active is the box-shadow color upon active
--palette-group-mark-background is the color for a activated checkbox
--palette-rating-number-hover is the fill and box-shadow colors in rating components (except emoticons and stars) upon focus or hover
--palette-rating-number-selected is the background-color of selected rating components (except emoticons and stars)

Fonts and typography

Any custom text and fonts are grouped under the “Typography” family of variables.

To use your own custom font for the form:

:root{ --typography-fontFamily: 'open sans'; }

Use fonts already loaded by a website:

@font-face {
	font-family: myCustomFont;
	src: url(https://mycompany.com/path/to/your/fontfile.woff2);
}
:root{
	--typography-fontFamily: myCustomFont; } 

You must make sure that your CORS policy allows font-src from a Medallia domain. See Allow-list guidance.

For example, compare the title of these text boxes:

Using default font (Open sans)

Text box title using default font.

Using custom font (Roboto)

Text box title using Roboto font.

Important: In order to improve performance and reduce load times, use a font that has already been loaded on your website. Be sure to match the name used in your website CSS. This method ensures that the browser uses the version that is already cached and does not download the font again.

Modifying the component label size

You can modify these properties of the components label’s font.

Example:

:root{ --typography-headline-size: 18px; /* Label font size */ }

Modifying spacing between questions

:root { --questions-spacing: 40px; /* vertical spacing between survey fields */ }

Modifying survey radio button and checkbox colors

The new survey form offers these controls to modify the checked and unchecked states:

Inner mark: the color of the inner circle or tick "✓" element.
Background: the color of the checked state

:root{ 
	--palette-group-inner-mark : #ffffff; /* mark color for group - checkbox or radio */
	--palette-group-mark-background: #011638; /* mark background for group - checkbox or radio */ }

You can also reuse the primary color by using:

:root { --palette-group-inner-mark: var(--palette-core-primary);}

Modifying Rating Scales

Digital Form 2.0 supports these modifications to the rating scales by defining your own custom CSS class (see above) and making these modifications. You can change the HEX color code as required:

For 1-5 Components

.myRatingsClass {
--palette-action-hover: var(--palette-core-primary);   /* hover/focus, represents the border of the highlighted element (Outline property) */
--palette-rating-custom-hover: rgba(254, 215, 44, .7); /* hover color for stars/emoticons */
--palette-rating-custom-selected: #FED72C;             /* active color for stars/emoticons */
--palette-rating-custom-outline: var(--palette-typography-placeholder);   /* normal and hover outline color for stars/emoticons */
--palette-rating-custom-selected-outline: var(--palette-typography-body); /* selected outline color for stars/emoticons */}

For all other rating components

.myRatingsClass {
--palette-rating-number-hover:var(--palette-core-primary);     /* hover outline for rating type number */
--palette-rating-number-selected: var(--palette-core-primary); /* selected color for rating number */
--palette-rating-number-text-hover: var(--palette-typography-body);
--palette-rating-number-text-selected: var(--palette-core-components);
--palette-rating-number-text-selected-hover: var(--palette-core-components);
--palette-rating-number-text: var(--palette-typography-body);
--palette-rating-number-fill-hover: var() /* fill color on hover for a numeric rating component
}

Modifying survey buttons

You can modify the submit and close buttons:

Submit button:

.surveyBtn.surveyBtn_submit { /*definition goes in here*/ }

Close button:

.surveyBtn.surveyBtn_close { /*definition goes in here*/ }

To hide the close button use:

.surveyBtn.surveyBtn_close { Display:none;}

To change the button alignment:

:root{
--survey-footer-buttons-justify: center; /* align footer buttons (1 page)*/
--survey-footer-multi-page-buttons-justify: flex-end; /* align footer buttons (multi page) */
}

To modify all footer buttons override the surveyBtn class.

Modifying the close(“X”) button

To modify the “X” button:

.surveyX { font-size: 10px; display: none; }

Make a specific question bold

To make a specific question bold, add a custom CSS class from the Digital Command Center (as described above) and use:

.myClass { font-weight:bold; }

Modifying the color of error message text

To modify the color of an error message use these definition in your custom CSS file:

:root { --palette-typography-error: #9055a2 }

Modifying the non-numeric scale questions

Survey Form 2.0 offers “Stars” and “Faces” non-numeric rating scales.

To modify the background color of the hover or selected state of non-numeric rating questions override these definitions:

:root{ --palette-rating-custom-selected: #800080 /*selected marking*/
	--palette-rating-custom-hover: #51414F /*hover color*/ }

Modifying the width of 1 to 5 rating scales

To modify the width of the 1 to 5 rating component, for example to spread it across the entire width of the form:

:root{ --rating-1to5-width: 500px }

Modifying the numeric rating scales labels

To modify the numeric rating scales labels, override the “ratingMinLabel” and “ratingMaxLabel” classes:

.ratingMinLabel { font-weight:bold; }

Modifying survey size on Mobile Web

To modify the form dimensions in mobile web use these class to override the survey size:

.mobile form { width:90%; }

Note: Overriding the mobile form dimensions could impact the survey's responsiveness on mobile web devices.

Modifying the scrollbar (Web and Mobile)

To hide the scrollbar add this:

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar, main::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
html, main {
    -ms-overflow-style: none /* IE and Edge */;
    scrollbar-width: none; /* Firefox */
}

To modify the style, for example color and size:

:root {
--survey-scrollbar-border-radius: 5px; /* Scrollbar edges border radius of thumb */
    --survey-scrollbar-width: 9px; /* Scrollbar width */
    --survey-scrollbar-width-display: 9px; /* Scrollbar width for firefox */
    --survey-scrollbar-track-color: rgba(0,0,0,0.2); /* Scrollbar track color */
    --survey-scrollbar-thumb-color: rgba(0,0,0,0.4); /* Scrollbar thumb color */
}

html::-webkit-scrollbar, main::-webkit-scrollbar {
    display: block;
    width: var(--survey-scrollbar-width, 9px);
    -webkit-appearance: none;
}

html, main {
    overflow-x: hidden;
    -ms-overflow-style: auto; /* IE and Edge */;
    scrollbar-width: auto; /* Firefox */
}

html::-webkit-scrollbar-track, main::-webkit-scrollbar-track {
    background: var(--survey-scrollbar-track-color, rgba(0,0,0,0.2));
}

html::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb {
    -webkit-border-radius: var(--survey-scrollbar-border-radius, 5px);
    border-radius: var(--survey-scrollbar-border-radius, 5px);
    background: var(--survey-scrollbar-thumb-color, rgba(0,0,0,0.4));
}

html::-webkit-scrollbar-thumb:hover, main::-webkit-scrollbar-thumb:hover {
    background: var(--survey-scrollbar-thumb-color, rgba(0,0,0,0.5));
}

Note: This section is handled by the browser. In some browsers (Safari, Firefox) the rendering may occur after the scrollbar is displayed.

Modifying the NPS slider color in Digital In-App only

To modify the NPS slider color in the mobile app, override these class:

input[type=range]
	{ --palette-core-primary: red; /* thumb color */
	 --slider-track-active-color: green; /* track left side color (smaller than selected value) */
	--slider-track-inactive-color: blue; /* track right side color (greater than selected value) */ }

Language specific customizations

Important: This type of customization is only possible for surveys which have been localized.

To make custom CSS changes language specific, replace :root with [lang="<language code>"]. Use IETF language tags as described in defining languages. The language that is chosen depends on the browser's locale settings.

For example:

[lang="fr"] {
--palette-rating-custom-selected:  #1ed64c;	/*selected marking*/
--palette-rating-custom-hover: #95ad9a;	/*hover color*/
}

This changes the rating styling for French language forms. Such changes can be made for multiple language within the same CSS file.

It is important to place these changes after the definitions made in the :root section. For example:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); /*Load the font for all languages*/

/*Applicable to all languages*/
:root
{
	--typography-fontFamily: 'Roboto',sans-serif;
}

/*French specific style, overriding the root definition*/
[lang="fr"] {
--palette-rating-custom-selected:  #1ed64c;	/*selected marking*/
--palette-rating-custom-hover: #95ad9a;	/*hover color*/
}

Hiding the Powered by Medallia logo

To hide the Powered by Medallia logo from the footer:

:root
{   --powered-by-display: none; }

Customize the Thank you page

The Thank you page image and button can be customized using these variables:

thank-you-page-button-position aligns the close button to a position. Possible values: Left, Right, center, start, end, flex-start, flex-end.
thank-you-page-image-position aligns the image to a position. Possible values: Left, Right, center, start, end, flex-start
thank-you-page-button-visibility displays the close button. Possible values: none, flex, grid, block, inline-grid, inline-block, inline-flex
thank-you-page-image-spacing configures spacing in pixels around image. Example values: 100px
thank-you-page-text-spacing configures spacing in pixels between text and image. Example values: 150px 0 150px 0

When configuring the spacing, using pixel (px) values lower than 50 could result in the image or button not being displayed and is not supported.

{ --thank-you-page-image-position: start; /* image position */
--thank-you-page-image-spacing: 100px; /* image spacing */
--thank-you-page-text-spacing: 150px 0 150px 0; /* text spacing */
--thank-you-page-button-visibility: grid; /* button visibility */ 
--thank-you-page-button-position: start; /* button position */ }