Primary color

Digital survey form 2.0 makes it easier to maintain your CSS by allowing you to define a primary color once, and then reusing it across the survey 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 primary color using --palette-core-primary configures the default value for these variables:

• --palette-action-hover
• --palette-action-active
• --palette-group-mark-background
• --palette-rating-number-hover
• --palette-rating-number-selected

Modifying interactions

Survey form 2.0 supports standard interactions such as hover to draw a visitor's attention to survey components, action focus to indicate what a click would control, and so on. Using custom CSS, a color can be assigned to:

• --palette-action-hover the box-shadow color upon focus or hover of an element
• --palette-action-active the box-shadow color upon active. Does not apply to text based inputs, but applies to other interactive elements such as buttons, ratings, labels and so on.
• --palette-action-focus the color used for outline when the component is the active selection
• --palette-action-hover-group the color used for outline when cursor hovers above component group. By default set to --palette-action-hover
• --palette-rating-number-hover the fill and box-shadow colors in rating components (except emoticons and stars) upon focus or hover

For example, here the --palette-action-focus is set to deepred, visible after the cursor click, and the --palette-action-hover is set to orange, visible as the cursor passes over the buttons.

Here the --palette-action-focus is set to deepred, seen as the visitor navigates between the buttons using the keyboard.

Here the --palette-action-hover-group is set to green, visible as the cursor first activates the radio buttons component, the group in this example, and then the individual button in orange.

The --palette-action-hover-group is sometimes not required, and is a good candidate for using the transparent color. Compare this example to the last, here the group hover is not visible as the cursor does not seem to activate the radio buttons component, but it then does activate the hover for the individual button in orange.

Combining the interaction related variables provides a wide range of customizations. For example, with this custom CSS:

:root{
    --palette-action-hover-group: transparent; 
    --palette-action-hover: orange;
    --palette-action-active: fuchsia;
    --palette-action-focus: darkred;
    --palette-rating-number-hover: green;
}

Here the --palette-action-hover-group is set to transparent, the --palette-action-hover is visible in orange as the cursor passes over the radio buttons. Then --palette-action-active is visible in fuchsia as the visitor clicks the 5 rating button and --palette-rating-number-hover is seen in green after the keyboard is used to change the rating to 2. In this way the --palette-rating-number-hover variable is used to differentiate between hover of the radio buttons, in orange, and hover of the numerical rating, in green.

Fonts and typography

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

To use a custom font:

: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; } 

Ensure that your CORS policy allows font-src from a Medallia domain. See Allow-list guidance.

The encoded font is used for all labels and text. For example, compare the title of these text boxes:

Using default font (Open sans)

Using custom font (Roboto)

Modifying the component label size

To modify the size of the component's label font:

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

Modifying spacing between questions

To modify the vertical spacing between survey fields:

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

Modifying survey radio button and checkbox colors

The 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 survey form 2.0 supports these modifications to the rating scales by defining your own custom CSS class, for example myRatingsClass, and using these variables.

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 survey buttons, such as submit, close and so on, by overriding the surveyBtn class and its subclasses.

Submit button:

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

Close button:

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

For example, to hide the close button:

.surveyBtn.surveyBtn_close { Display:none;}

To change the button alignment:

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

To modify all footer buttons override the surveyBtn class.

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

Modifying the close (“X”) button

To modify the close “X” button override the surveyX class:

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

Modifying the color of error message text

To modify the color of error messages:

: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 configure these variables:

: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 Digital Web for mobile browsers, use the mobile class, for example 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

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));
}

Language specific customizations

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. App Rating engagements

xa:root
{ --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 */ }