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
• --slider-track-active-color
• --palette-group-background-color

Modifying interactions

Survey form 2.0 supports standard interactions such as action focus to indicate what a click would control. Using custom CSS, a color can be assigned to:

• --palette-action-hover the box-shadow color upon focus or hover of an element

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

Fonts and typography

Any custom text and fonts are grouped under the “Typography” family of variables. For Digital SDK properties, to use a custom font requires encoding the font file and including the resulting string directly in the CSS file.

Encoding a font to base64 relies on specific tools, and the exact procedure depends on the operating system being used. For example on a macOS or Linux system, use the base64 CLI tool:

base64 -w 0 -i myfont.ttf -o fontbase64.txt

Where

• -w 0 ensures that the result is on a single line
• -i myfont.ttf is the input font file that you are encoding
• -o fontbase64.txt is the output file where the encoded font is saved

The resulting base64 encoded string from the output file should then be included directly into the custom CSS file:

@font-face {
	font-family: myCustomFont;
	src: url(base64_encoded_font);
}
:root{
	--typography-fontFamily: myCustomFont; } 

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 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 this variable.

For 1-5 Components

.myRatingsClass {
--palette-action-hover: var(--palette-core-primary);   /* hover/focus, represents the border of the highlighted element (Outline property) */

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.

Modifying the color of error message text

To modify the color of error messages:

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

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 NPS slider color in Digital In-app

To modify the NPS slider color in the mobile app:

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

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