Defining a custom CSS class for a component

To make minor changes to a survey component use a custom class to override the default definition. Use this option to customize a specific component on a form without having the same change applied to the entire form.

For example, to customize the border color for a specific element in the form:

.myClass { --palette-core-outline: rgba(18, 24, 38, .1); }

Here the class is called myClass and it uses the supported variable, --palette-core-outline, to apply a custom border color. Once this class is defined in a custom CSS file it can be assigned to survey components in the survey editor.

You can change any attribute of a specific form component using the predefined variables by setting up a custom CSS class and then override the specific variable.

The following example changes the font of a specific question:

.myClass { --typography-fontFamily: 'open sans'; }

The class name is applied to the top level element of the component.

Example HTML showing the location of custom class

This can be done for any survey component.

Global CSS definitions

CSS styling can also be applied for any component using our predefined CSS variables. This allows you to define the required changes that ensure forward compatibility, even if the form’s HTML structure has been changed.

Any changes based on the form’s HTML DOM structure, and not using the predefined classes and variables, are not supported by Medallia and might have unpredictable results with new software releases.

The main difference between standardCSS classes and CSS Variables is that all the definitions are made under a unique class called :root.

For example, if you would like to change the border color for all elements in the form:

:root { --palette-core-outline: rgba(18, 24, 38, .1); }

Adding CSS to surveys and invitations

Once you have a CSS file that customizes survey form V2, upload it to Digital's resources library. The file is an asset and handled in the same way as any other resource in the library. Depending on what you are customizing, choose how to assign the CSS that applies to customizations of surveys, survey form components and invitations.

Customizing surveys

To use a custom CSS file with a survey form, the CSS file needs to be assigned to the survey.

1. Click the Edit Form icon for a specific survey in either card or list view, then click Form Settings in the top right corner of the screen.

2. On the Form Design tab, for the Custom CSS option, the drop-down lists the CSS files uploaded to the resources library. Select the custom CSS file from the drop-down.

   

3. Click Save Changes.

Customizing survey components

To use custom CSS for a specific survey component, the uploaded CSS file must be attached to the survey, and the CSS class needs to be assigned to the component.

1. Click the Edit Form icon for a specific survey in either card or list view to open the survey editor.

2. Select the element in the survey editor. In the options on the left of the window, for the Custom CSS Class field type the class name defined in the custom CSS file.

   

3. Click Save Changes.

Customizing invitations

To add a customized CSS file to an invitation:

1. Click the Configure Targeting Options icon for a specific invitation.

2. On the Advanced tab, for the Use a custom CSS file option, select the custom CSS file from the drop-down.

   

3. Click Save Changes.