Custom CSS guidelines

The design editor of Mopinion lets you customize a great part of the form that you are building. But sometimes there is a need to add additional styling that cannot be added directly in the form interface.

If you are experiencing issues with the display of the survey in your live environment whereby the survey looks different than it did in the preview, please contact us at support@mopinion.com

These styling rules can be added in the Custom CSS section in the Design > Form tab.

The custom CSS rules are part of the currently selected theme, keep in mind that all surveys that share this theme will also share the additional styling rules added here.

Scope

All elements in the Mopinion forms are descendants of an element with the class mopinion-survey-content. When adding rules in the Custom CSS editor, use this class to scope your rules to:

.mopinion-survey-content

Not starting your selector with this class poses the risk of the custom CSS influencing styling on your page.

Adding styling for a specific form

It is possible to add custom styling that will only apply to the styling of a specific form, so even if multiple forms are sharing the theme, the rule can be scoped to apply to just one.

This can be done by utilizing the data-key attribute that is unique for each form. The value of that data-key attribute will be the form key associated with that form.

The form key for a survey can be found on the form overview page:

 

.mopinion-survey-content .mopinion-survey-output[data-key='c1ca409945618baa84fde4a564de806cc303d432'] { /* styling for survey c1ca409945618baa84fde4a564de806cc303d432 goes here */ }

Targeting a specific type of survey

Mopinion has three distinct display types for the surveys:

These different types get their own class when rendered

  • Modal: .is-modal

  • Slide-in: .mopinion-slide

  • Embedded: .is-embed

.mopinion-survey-content .mopinion-survey-output.is-modal { /* Applies only to surveys displayed as modal */ }

Slide-in

Embedded

Targeting Mobile Device / Small Screens

It is possible to only apply CSS on mobile devices or those browsing on a small screen. One can do so by checking the max width of the user’s screen.

To do this you can add your CSS code on line 2 inside the following snippet

Feel free to modify the 450px value to your liking.

Applying fonts via custom CSS

It is possible to use your own fonts that are hosted on your website in a Mopinion form. This is useful if your company uses a proprietary font and the form should use the same typography as the rest of the page.

We can also host your fonts on our end for you, in this case we will add the font family to the custom CSS.

For both of the above options, one can then use the following rules to target the different elements used in Mopinion forms and apply the chosen font(s) to those elements.

Make sure that the font declaration matches the font declaration as used on your site, e.g. replace MyWebFont with the actual font, we recommend using the same font fall backs as well.

Examples of custom CSS

Hide required mark

When setting a question element and setting it to required, Mopinion adds an asterisk after the question title to indicate that this is the case.

If you want to hide this asterisk, the following rule can be used.

Hide icons from navigation buttons

The navigational buttons have by default also an icon on them.

If you want to hide the icons on the navigational buttons the following rules can be used

Move position of the close cross

The position of the closing cross for modal or slide-in surveys can be changed by adding one of the following rules. This element is absolute positioned relative to its parent element.

Slide-in close cross

Modify z-index

Reduce gap from header to first question

Reduce gap between questions

Modify the width of form

Add placeholder text to the translation button

The translation button has no text by default but this can be added.

Make the feedback button transparent