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.
You will find the Custom CSS area within the Survey Builder > Widget Styling section of the Grapevine app.
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 are:
Survey title
Survey description
Submit button: disabled and enabled
An example of some CSS override styling:
#grapevine-form { background: #AF1F31; }
#grapevine-form h2 { color: #FFFFFF; }
#grapevine-form .os-step__title { color: #FFFFFF; }
#grapevine-form .os-step__description { color: #FFFFFF; }
#grapevine-form #hdyh_form button#hdyh_submit_button:enabled {
background: #686868!important;
}
#grapevine-form #hdyh_form button#hdyh_submit_button:disabled{
background: #96969!important;
}
Tweak those styles to suit your theme.
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 a lot of possible responses, then the dropdown style may be the better styling option to choose.
Try out both options to see what works for you. If you're not sure how to view your survey widget, 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!