We use the default layout template of your published theme to generate the standalone survey page. It should pick up the majority of your theme's fonts and styles to look coherent with your brand, however, you may decide that you'd like to make some changes to make your standalone survey page really stand out.
Custom CSS
You can override the CSS styling of a standalone survey page on a per survey basis.
Standalone Page Custom CSS settings can be found by selecting the survey that you wish to style and then selecting the Edit Survey button:
You will then be presented with the survey editor.
Within the left-hand pane, select the Styling tab:
You will see a section called Standalone page & Embedded containing the Custom CSS input area:
Applying override styles to this area will only affect the survey on the standalone and embedded survey page. It will not affect how the survey will appear if it is also published on the order status page or on POS.
If you're looking to style the survey on your order status page, then please see our article on styling the survey widget on the order status page.
Depending on the types of survey questions you have selected for your survey, the layout, Id's and classes will differ. Below is a guide to the styles used for each question type on the standalone survey page.
Survey question, additional text and submission messages
These CSS elements are common across all survey types:
Survey question:
#grapevine-page-wrapper
#grapevine-title{}
Optional "additional text" used to provide more context about the survey
#grapevine-page-wrapper
#grapevine-intro{}
Thank you message after a successful submission:
#grapevine-page-wrapper
#grapevine-thankyou-message{}
Error message after an unsuccessful submission:
#grapevine-page-wrapper
#grapevine-error-message{}
Fixed response survey type
If you are styling a fixed response survey, the following CSS id's and classes can be targeted:
Radio buttons:
#grapevine-page-wrapper
#grapevine-form
#grapevine-radio-wrapper
.grapevine-radio-item
.form-check
.form-check-input{}
Radio button labels:
#grapevine-page-wrapper
#grapevine-form
#grapevine-radio-wrapper
.grapevine-radio-item
.form-check
.form-check-label{}
Other textarea input field (if enabled):
#grapevine-page-wrapper
#grapevine-form
#grapevine-radio-wrapper
#grapevine-other
#grapevine-other-input{}
Open Text survey type
There is only one element that can be targeted when using the open text survey type, which is the main textarea, where respondents provide their typed survey response:
#grapevine-page-wrapper
#grapevine-form
#grapevine-open-text{}
NPS survey type
There are a few elements that can be targeted with this survey type:
Please Note:
Our recommendation is to not attempt to color code or explain the scale. This is based on NPS best practices, and the key here is to request feedback in as neutral manner as possible so as not to influence the person giving feedback, but to get their true, unbiased sentiment
NPS 0 to 10 selectable options:
#grapevine-page-wrapper
#grapevine-form
#grapevine-nps-option-wrapper
.grapevine-nps-option{}
Labels underneath NPS 0 to 10 options
Not Likely:
#grapevine-page-wrapper
#grapevine-form
#grapevine-nps-helper-text-container
.grapevine-not-likely.grapevine-nps-helper-text{}
Likely:
#grapevine-page-wrapper
#grapevine-form
#grapevine-nps-helper-text-container
.grapevine-likely.grapevine-nps-helper-text{}
Personal information fields
If you have chosen to collect personal information from the respondent (find out more about collecting identifiable survey responses), those fields can be targeted as follows:
Respondent first name:
#grapevine-page-wrapper
#grapevine-form
#grapevine-additional-fields
#grapevine-first-name{}
Respondent last name:
#grapevine-page-wrapper
#grapevine-form
#grapevine-additional-fields
#grapevine-last-name{}
Email address:
#grapevine-page-wrapper
#grapevine-form
#grapevine-additional-fields
#grapevine-email{}
Submit button
The submit button will be disabled by default until a response has been provided, either by selecting one of the fixed response options, by providing a typed response to the open text survey type, or, selecting one of the NPS survey ratings.
The id for the submit button is:
#grapevine-page-wrapper
#grapevine-form
#grapevine-submit-survey{}
If you need to style the disabled state of the submit button, you can use the following CSS selector:
#grapevine-page-wrapper
#grapevine-form
#grapevine-submit-survey:disabled{}
Changing the survey heading after successful submission of the survey
If you'd like to change the heading of the survey to something like "Thank you for your feedback!" when a respondent submits the survey, then we have a javascript event that you can latch onto to change the wording. It requires a bit of javascript and CSS knowledge, but we have an article that explains how to do this:
How do I change the survey heading after a successful submission?
Need any help?
If you have any questions or need any help with custom CSS to style your standalone survey page, then please do get in touch and we'll do our best to help!