Articles in this section

Styling the survey widget

Steve Jones
  • Updated

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

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 will find the Custom CSS area within the Survey Builder > Widget Styling section of the Grapevine app.

mceclip3.png

Using a dropdown or radio buttons

Within the widget styling options 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.

mceclip0.png

Try out both options to see what works for you.

Custom CSS Styles

The main selector for the Grapevine survey widget is #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:

#grapevine-form .os-step__title { color: #333333; }

Survey description

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

#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:

#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:

#grapevine-form #hdyh_form button#hdyh_submit_button:disabled{ background: #96969!important; }

In an enabled state:

#grapevine-form #hdyh_form button#hdyh_submit_button:enabled { background: #686868!important; }

Example CSS

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

#grapevine-form { background: #FFFFE0; }
#grapevine-form .os-step__title { color: #333333; }
#grapevine-form #hdyh_text{ color: #000000; }
#grapevine-form #hdyh_form_thankyou{ color: #009933; }
#grapevine-form #hdyh_form button#hdyh_submit_button:disabled{
      background: #96969!important;
}
#grapevine-form #hdyh_form button#hdyh_submit_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.

Need any help?

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

Related articles