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:
This is how the survey widget will appear once an option has been selected:
You will find the Custom CSS area within the Survey Builder > Widget Styling section of the Grapevine app.
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.
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; }
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!