Styling the survey widget – Grapevine

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.

Styling the Fixed Response survey widget

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

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

Within the survey builder page of the Grapevine app, scroll down to find the Settings section where you can enter in your Custom CSS:

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.

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:

Survey title
Survey description
Survey thank you message
Submit button: disabled and enabled

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; }

Submit button: disabled and enabled

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

In a disabled state:

#grapevine-form button:disabled { background: #969696!important; }

In an enabled state:

#grapevine-form 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 button:disabled { background: #969696!important; }
#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.

Please Note:

The features and settings described in this article are only available to Merchants on our Base or Extra plan.

Need to upgrade to make use of these features? Please take a look at our plans and pricing page.

Styling the Open Text survey widget

There is a dedicated Styling section within the Survey Builder for Open Text type surveys:

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

Styling the NPS survey widget

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

This article will be updated with recommendations for styling your NPS survey soon. Please do get in touch if you would like some help with this in the meantime.

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!

Articles in this section