Custom CSS and survey form

How to use custom CSS to style survey form elements.

The Medallia Digital survey form 2.0 introduces a brand new survey experience. Completely rewritten from the ground up using the latest technology, Digital survey form 2.0 ensures a great feedback experience for all users across all platforms.

Important: 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.

Note: This document covers the survey form 2.0 only.

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. See Custom CSS accessibility guidelines.

Form Structure and supported scope

In order to improve performance and reduce the overall 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.

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.

Tip: Defining an empty variable in your custom CSS file has a negative impact on the rendering of survey form 2.0

To summarize: Only customizations described in this guide are supported.