Articles in this section

Styling the survey widget on Order Status Page

Steve Jones
  • Updated

If you'd like to customise the style of your Grapevine survey widget that appears on the Order Status Page, we have an area within the apps settings where you can add your own CSS styles to override the default styling.

Styling the Fixed Response survey widget

This is how the survey widget will appear before a response has been selected:

mceclip2.png

This is how the survey widget will appear once an option has been selected:

mceclip1.png

You can enter in your Custom CSS within the Styling tab of the survey editor:

OSP_custom_CSS.png

Using a dropdown or radio buttons

Within the Options section you can also specify whether you want the survey responses to be represented as a dropdown list or as radio buttons. The dropdown list will take up less space on the Order Status Page, however, the radio button layout may make the survey more prominent on the Order Status Page and therefore more likely to solicit a response.

The best style for your survey will depend on how many responses you have configured for your survey question. If you have a lot of options, then the dropdown style may be the better styling option to choose, but if you want all of the options to be visible on the screen at the same time, then the radio buttons may be the best choice.

gv2_options_dropdown_list.png

Try out both options to see what works for you.

Custom CSS Styles

The main selector for the Grapevine survey widget is div[id^=“grapevine-form”]

Adding your own CSS to the Custom CSS area will override the widget styling.

Common elements to style here are as follows:

Let's take a look at each of those in turn:

Survey title

The following style will target the title of your survey:

div[id^=“grapevine-form”] .os-step__title { color: #333333; }

Survey description

The following style will target the description/question in your survey:

div[id^=“grapevine-form”] #hdyh_text{ color: #000000; }

Survey thank you message

The following style will target the thank you message once your survey has been submitted:

div[id^=“grapevine-form”] #hdyh_form_thankyou{ color: #009933; }

mceclip5.png

Submit button: disabled and enabled

The following style will target the submit button of your survey:

In a disabled state:

div[id^=“grapevine-form”] button:disabled { background: #969696!important; }

In an enabled state:

div[id^=“grapevine-form”] button:enabled { background: #686868!important; }

Example CSS

Here's an example of all of those CSS override styles put together: 

div[id^=“grapevine-form”] { background: #FFFFE0; }
div[id^=“grapevine-form”] .os-step__title { color: #333333; }
div[id^=“grapevine-form”] #hdyh_text { color: #000000; }
div[id^=“grapevine-form”] #hdyh_form_thankyou { color: #009933; }
div[id^=“grapevine-form”] button:disabled { background: #969696!important; }
div[id^=“grapevine-form”] button:enabled { background: #686868!important; }

 

Mobile CSS Styles

We have also included some default mobile responsive styles for the widget when it is being viewed on mobile devices. Here are the default styles:

@media only screen and (max-width: 375px) {
    #hdyh_choice {
        min-width: 272px !important;
    }
}
@media only screen and (max-width: 360px) {
    #hdyh_choice {
        min-width: 257px !important;
    }
}
@media only screen and (max-width: 320px) {
    #hdyh_choice {
        min-width: 216px !important;
    }
}
@media only screen and (max-width: 280px) {
    #hdyh_choice {
        min-width: 176px !important;
    }
    #hdyh_choice select {
        width: 176px;
    }
}

Viewing the survey widget when making CSS changes

If you're not sure how to view your survey widget to see the changes you make, please read our article on how to preview/view the survey widget.

 

Styling the Open Text survey widget

Much of the CSS and styling recommended above will apply also to the Open Text type survey:

gv2_Open_Text_Preview_section.png

 

Styling the NPS survey widget

Styling of the NPS survey widget is controlled via the main NPS section of the Survey Builder page:

gv2_NPS_styling.png

Default styling for the NPS survey displays the scale within circles:

default_NPS_styling.png

Perhaps you may prefer the scale displayed within rounded rectangles? One simple line of code will achieve this:

.gv-nps-option { border-radius: 20%; }

NPS_rounded_rectangles.png

Targeting additional elements of the NPS survey

You can use the following code to target the text colours of the Survey question and labels. Remember to check the Preview box to make sure all of your changes are working as expected:

UI_text_colours_preview.png

/*Survey Question:*/
div[id^=“grapevine-form”] .os-step__title { color: #0099CC!important; }

/*Labels underneath NPS 0 to 10 options:*/
.gv-likely { color: green!important; }
.gv-not-likely { color: red!important;}

Here is the full list of NPS elements that can be targeted via CSS. Feel free to experiment with the hex values, perhaps add in your own branding colours. 

/*Survey Question and thank you message:*/
div[id^=“grapevine-form”] { color: #545454!important; }
div[id^=“grapevine-form”] .os-step__title { color: #0099CC!important; }
#gv-nps-thankyou { color: #0099CC!important; }

/*NPS 0 to 10 options:*/
#gv-nps-scale
.gv-nps-option-wrapper { background-color: #fff!important; }
.gv-nps-option { background-color: #fff!important; }

/*Labels underneath NPS 0 to 10 options:*/
.gv-nps-legend-wrapper { }
.gv-likely { color: green!important; }
.gv-not-likely { color: red!important;}

Need any help?

If you have any questions or need any help with custom CSS to style your survey widget for the Order Status Page, then please do get in touch and we'll do our best to help!

Related articles