Introduction

The Medallia Digital survey Form 2.0 introduces a brand new survey experience. We have completely rewritten the entire form using the latest technology, to ensure a great survey taking experience for all users across all platforms.

Survey Form 2.0 is based on a completely new technology infrastructure, so any previous CSS customizations are no longer compatible and a new custom CSS file must be created.

With the new infrastructure, many changes are easier to make, such as changing the ratings colors. However, some CSS customization techniques used previously might no longer be possible, for example allocating an image to a radio button.

If you find that a customization that you require is not currently available, please contact your Medallia Digital Expert.

An important note about accessibility

The Medallia Digital new survey form has been designed from the ground up to be WCAG 2.1 compliant, making it accessible to the widest range of people. As you make changes to your Digital form, it is your responsibility to ensure that it remains compliant with WCAG Guidelines.

Form Structure and supported scope

In order to improve the form’s performance and reduce the overall survey payload, the new Medallia Digital Feedback survey form HTML is generated by code during runtime. This means that the HTML structure of the form, as well as element identifiers such as IDs and Classnames, might be different from survey to survey, even on the same property. This is a major shift from the previous form implementation which was based on a static HTML template that introduced a larger footprint.

As a result of this change, modifications and customization that are not described in this document, and that are based on the form’s structure, are not supported and might not work across browsers and device types. We also cannot guarantee that they will continue to work between software releases, or hotfixes and so on.

This includes some of the more popular modifications such as:

• Replacing the styles of rating scales
• Custom Stars or Smilies
• CSS based text modifications
• Thumbs Up or Down

We do have plans to allow these modifications as part of our products in a governed, scalable and accessible way in our upcoming releases. If there is a modification that is not mentioned, please open a feature request on https://help.medallia.com.

Use of Custom HTML might be required for these types of requirements. To summarize: Only customizations described in this guide are supported.

Custom CSS Basics

Custom CSS modifies the visual properties of elements on a web page, and the Digital survey form 2.0 supports the following ways to utilize custom CSS:

• Specific Custom CSS per component
• Global CSS definitions

Defining Custom CSS per component

Use this option to customize a specific component on a form without having the same change applied to the entire form.

To create a custom CSS class for a component, edit the form in the Form Designer of the Medallia Digital Command Center, and enter a class name in the Custom CSS Class field:

The class name is applied to the top level element of the component. In this example the custom class name is myImage:

Example HTML showing the location of custom class

This can be done for any survey component. Once the custom CSS Class has been added to the field, the classname then needs to be defined in the CSS file associated with the form in the Form Settings.

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 use the following code:

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

To apply the border color for a specific element in the form, set up a custom CSS class as described above, then override the specific variable in a custom CSS file:

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

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

The following example changes the font of a specific question:

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