Survey Name

Survey Type Brand TrackBrand Lift

Language enesfrmszhjako

Response Type Submit Responses at End of SurveySubmit Responses after each Question

Survey Creative CSS

Example Survey

body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: white; line-height: 1.4; } /* The .invisible class is used for hiding the 'Thank You' message that is not shown until the end of the survey questions. It is probably best not to change this class. */ .invisible { display: none; } /* PlusCo logo styles - only visible after thank you message */ #plusco_logo { position: absolute; bottom: 5px; right: 5px; width: 25px; height: auto; z-index: 1000; opacity: 0.6; pointer-events: none; display: none; /* Hidden by default */ } /* Show logo only when thank you is visible */ .thankyoucontainer:not(.invisible) ~ #plusco_logo, .thankyoucontainer:not(.invisible) + #plusco_logo, .thankyoucontainer:not(.invisible) #plusco_logo { display: block; } /* Alternative approach - show logo when survey container is hidden */ #survey_container.invisible ~ #plusco_logo, #survey_container.invisible + #plusco_logo { display: block; } /* The #master_container is the box containing all survey elements as a DIV. It contains the survey_container, the thankyou_container, and the bottom container - all divs. */ #master_container { background-color: white; width: 300px; height: 250px; border: 1px solid #e0e0e0; position: relative; } /* Hide the advertisement background */ #ad_background { display: none; } /* The #survey_container is the box (div) containing the question container and all option_container_[0-6] divs. */ #survey_container { padding: 8px; height: 200px; overflow-y: auto; overflow-x: hidden; padding-bottom: 12px; /* Extra padding to ensure last option is fully visible */ } /* Custom scrollbar styling */ #survey_container::-webkit-scrollbar { width: 6px; } #survey_container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } #survey_container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } #survey_container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* .Qbox is the CSS class for controlling the look of the question container, including the text of the question itself. */ .Qbox { background-color: white; border: 1px solid #e0e0e0; border-radius: 5px; padding: 8px 10px; margin-bottom: 6px; min-height: 35px; display: flex; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .Qbox span { font-size: 12px; font-weight: 600; color: #333; line-height: 1.3; } /* .Abox is the CSS class for controlling the look of the option containers (the answers) but does NOT including the formatting of the answer/option text: that is in .AText */ .Abox { background-color: white; border: 1px solid #e0e0e0; border-radius: 5px; margin: 3px 0; transition: all 0.2s ease; cursor: pointer; min-height: 22px; display: flex; align-items: center; } /* The .Abox[selected="true"] class allows for the formmating of the answer/option box if the user is using keyboard controls to manually select the answer. */ .Abox[selected="true"] { background-color: #f0f8ff; border-color: #4a90e2; box-shadow: 0 1px 3px rgba(74, 144, 226, 0.2); } /* The .Abox:hover class allows for the formmating of the answer/option box when the user hovers their mouse over it. */ .Abox:hover { background-color: #f8f9fa; border-color: #4a90e2; } /* .AText is used to select the formatting of the answer/option text. */ .AText { font-size: 11px; color: #333; padding: 4px 8px; font-weight: 500; line-height: 1.2; flex: 1; } /* Selected text styling */ .Abox[selected="true"] .AText { color: #4a90e2; font-weight: 600; } /* The #bottom_container class is used to format the blank space shown at the bottom of the survey creative. */ #bottom_container { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 8px; background-color: white; border-top: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; min-height: 30px; } /* The #next_button class is used to format the button that is shown at the bottom of a survey question page when that question is multiple option as it allows the user to advancce to the next question after all their selections are made. */ #next_button { font-size: 10px; font-weight: 600; color: white; background-color: #4a90e2; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; transition: all 0.2s ease; } /* The #next_button:hover class is used to format the 'next' button when the user hovers over it with their mouse. */ #next_button:hover { background-color: #357abd; } /* The #question_comment class is used for the comment text */ #question_comment { color: #666; font-size: 9px; font-weight: 500; } /* The .thankyoucontainer class allows for formatting of the div and its text that is shown at the end of the survey. */ .thankyoucontainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; background-color: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .thankyoucontainer div { font-size: 16px; font-weight: 600; color: #333; } /* Responsive adjustments for different numbers of options */ #survey_container:has(.Abox:nth-child(7)) { padding: 6px; } #survey_container:has(.Abox:nth-child(7)) .Qbox { min-height: 30px; margin-bottom: 4px; } #survey_container:has(.Abox:nth-child(7)) .Abox { margin: 1px 0; min-height: 18px; } #survey_container:has(.Abox:nth-child(7)) .AText { font-size: 10px; padding: 3px 6px; }

Advertisement Sample Question opt1 opt2 opt3 opt4 opt5 opt6 opt7 Next Update Sample Based on CSS

Cancel