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

Modal

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

Slide-in

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

Embedded

.mopinion-survey-content .mopinion-survey-output.is-embed {
    /* Applies only to surveys displayed as 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

@media screen and (max-width: 450px){

}

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 MyFont with the actual font, we recommend using the same font fall backs as well.

/* Feedback button */
button.btn.btn-open-survey{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* Form title */
.mopinion-survey-content .srv-title{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* Front page */
.mopinion-survey-content .front-page .custom-section{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* Last page */
.mopinion-survey-content .last-page .custom-section{
    font-family:'MyFont', Helvetica, sans-serif;
}

/*question block titles */
.mopinion-survey-content .control-group .block-title{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* question blocks ( rating scores, radio/checkbox text etc ) */
.mopinion-survey-content .control-group label{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* input & textarea */
.mopinion-survey-content .control-group input,
.mopinion-survey-content .control-group textarea{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* Likert/Matrix */
.mopinion-survey-content .control-group th,
.mopinion-survey-content .control-group td{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* error message */
.mopinion-survey-content .alert.alert-danger{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* Rating legend */
.mopinion-survey-content .rating-legend{
    font-family:'MyFont', Helvetica, sans-serif;
}

/* Button previous/next */
.mopinion-survey-content .btn.btn-previous,
.mopinion-survey-content .btn.btn-next{
     font-family:'MyFont', Helvetica, sans-serif;
}

/* Button submit */
.mopinion-survey-content .btn.btn-submit{
     font-family:'MyFont', Helvetica, sans-serif;
}

/* Translation language options*/
.mopinion-survey-content .toggle-menu-label{
    font-family:'MyFont', Helvetica, sans-serif;
}

Keep in mind that if you use on-page fonts, the preview page within Mopinion won’t have access to this font. As a result the form preview will look slightly different from what is rendered on your site. If we host the font for you, then the custom font will shown in the form preview.

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.

.mopinion-survey-content .required-mark{
    display:none;
}

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

/* Hide icon from previous button */
.mopinion-survey-content .form-actions .btn.btn-previous i{
    display:none;
} 
/* Hide icon on next button */
.mopinion-survey-content .form-actions .btn.btn-next i{
    display:none;
} 
/* Hide icon from submit button */
.mopinion-survey-content .form-actions .btn.btn-submit i{
    display:none;
}

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

/* Change position close cross for Slide-in surveys */
.mopinion-survey-content #surveyBody.mopinion-slide .close-modal {
    top: 0;
    right: 0;
}

Modal close cross

/* Change position close cross for Modal surveys */
.mopinion-survey-content #surveyBody .close-modal {
    top: 10px;
    right: 10px;
}

Modify z-index

/* Change z-index of the feedback button */
.mopinion-survey-content .btn-open-survey.tab{
    z-index: 9500!important;
}

Reduce gap from header to first question

.mopinion-survey-content #surveyHead{
    margin-bottom:0;
}

Reduce gap between questions

.mopinion-survey-content .control-group{
    padding-bottom:0;
}

Modify the width of form

.mopinion-survey-content .surveyWindow {
    width:20%!important;
    min-width:300px!important;
    max-width:1000px!important
}

Add placeholder text to the translation button

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

The “language” text is just an example

.language-toggle .current:before {
    content:'Language'
}

.language-toggle.has-icon .current:before {
    content:''
}

Hide default language from language toggle button

.toggle-item-wrap .toggle-menu-item:first-child{
    display:none;
}

Make the feedback button transparent

/* Modify the fourth parameter to set the opacity */
.mopinion-survey-content button.btn-open-survey.btn-primary.tab-right {
    background-color:rgba(3, 169, 244, .3);
    border-color:rgba(3, 169, 244, .3);
}

Centering of form elements

/* Form Title */
.mopinion-survey-content #surveyHead h1 {
    text-align:center;
}

/* Question Titles */
.mopinion-survey-content .block-title {
    text-align: center;
}

/* Thumbs */
.mopinion-survey-content .button-container {
    justify-content: center;
}

/* Smileys  */
.mopinion-survey-content .rating-group.emoji {
    margin: auto;
}

/* Stars  */
.mopinion-survey-content .rating-group.stars div{
    display: flex;
    justify-content: center;
}

/* Screenshot */
.screenshot-group fieldset div {
    text-align: center;
}

/*GCR / Category  */
.mopinion-survey-content .gcr-wrapper.button label,
.mopinion-survey-content .category-wrapper.button label {
    text-align: center!important;
}

/* Select */
.mopinion-survey-content .nice-select .option {
    text-align: center;
}

/* Radiobuttons / Checkboxes */
.mopinion-survey-content  .radio-group,
.mopinion-survey-content .checkbox-group{
    text-align: center;
}
.mopinion-survey-content  .radio-group div,
.mopinion-survey-content  .checkbox-group div {
    display: inline-block;
}
.mopinion-survey-content .radio-wrapper, 
.mopinion-survey-content .checkbox-wrapper {
    display: flex!important;
}

/* Link element */
.mopinion-survey-content .link_block {
    text-align: center;
}

/* Section break */
.mopinion-survey-content .section-title,
.mopinion-survey-content .srv-description, .mopinion-survey-content .section-description {
    text-align: center;
}

/* Form control buttons */
.mopinion-survey-content .form-actions {
    display: flex;
    justify-content: center;
}
/* Add spacing between back - next/submit button */
.mopinion-survey-content .form-actions button:nth-child(2)  {
    margin-left: 2rem;
}

Knowledge base