We use the default layout template of your published theme to generate the standalone survey page.
Standalone survey pages should pick up the majority of your theme's fonts and styles to look coherent with your brand
Embedded surveys will pick up the majority of the styles associated with the base css of the page it is embedded into, whether that is a page in your store or on a page in a completely different website.
We have applied CSS elements to the majority of elements within the survey to allow you to have more control over how the survey appears.
The following article will guide you through how to target those elements using CSS.
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 within POS.
Please note:
If you're still using Grapevine Surveys on your legacy post-purchase pages and are looking to style the survey, then please get in touch with our support team.
Depending on the types of survey questions you have selected for your survey, the ID's and classes will differ.
Survey's additional text and submission messages
The following are common CSS elements:
Survey title:
#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{}
Single-choice question type
If you are styling a single-choice question type, the following CSS id's and classes can be targeted:
Radio buttons:
#grapevine-radio-wrapper .form-check-input{}
Radio button labels:
#grapevine-radio-wrapper .form-check-label{}
Other answer option label (if enabled):
#grapevine-page-wrapper .grapevine-other-input-label{}
Other answer option input field (if enabled):
#grapevine-page-wrapper .grapevine-other-input-field{}
Other sub-option answer field (if enabled):
#grapevine-radio-wrapper .sub-option-other-wrapper input{}
Multiple-choice question type
If you are styling a multiple-choice question type, the following CSS id's and classes can be targeted:
Checkbox:
.grapevine-checkbox-wrapper .form-check-input{}
Checkbox labels:
.grapevine-checkbox-wrapper .form-check-label{}
Other answer option label (if enabled):
#grapevine-page-wrapper .grapevine-other-input-label{}
Other answer option input field (if enabled):
#grapevine-page-wrapper .grapevine-other-input-field {}
Open Text question type
The following elements can be targeted when using the open text question type:
Question:
.grapevine-open-text-question label{}
Question sub-text:
.grapevine-open-text-question p{}
Answer input area:
#grapevine-page-wrapper textarea{}
NPS question type
There are a few elements that can be targeted with this survey question 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-nps-option-wrapper .grapevine-nps-option{}
Labels underneath NPS 0 to 10 options:
Not Likely:
#grapevine-nps-helper-text-container .grapevine-not-likely{}
Likely:
#grapevine-nps-helper-text-container .grapevine-likely{}
Content blocks
The following elements can be targeted when using a content block question type:
Content block title:
.grapevine-content-block h2 {
/* Add your styles here */
}
Content block intro:
.grapevine-content-block p {
/* Add your styles here */
}
Personal information fields
If you have chosen to collect personal information from the respondent (find out more about collecting identifiable standalone survey responses), those fields can be targeted as follows:
Respondent First Name:
Label
label[for="grapevine-first-name"] {
/* Add your styles here */
}
Input field
#grapevine-additional-fields #grapevine-first-name {
/* Add your styles here */
}
Respondent Last Name:
Label
label[for="grapevine-last-name"] {
/* Add your styles here */
}
Input field
#grapevine-additional-fields #grapevine-last-name {
/* Add your styles here */
}
Respondent Email:
Label
label[for="grapevine-email"] {
/* Add your styles here */
}
Input field
#grapevine-additional-fields #grapevine-email {
/* Add your styles here */
}
Submit button
The submit button will be disabled by default until responses have been provided to all required questions. Required questions are denoted with (*). The submit button will then be enabled and highlighted ready for submission.
The id for the submit button is:
#grapevine-submit-survey{}
If you need to style the disabled state of the submit button, you can use the following CSS selector:
#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 "Survey complete!" 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:
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!