Basic customization of your website survey can be accomplished in the Iterate survey builder, including color scheme and fonts. Fonts will automatically be matched to your site, but can also be manually specified in the survey builder.
If you need further control over customization, certain elements of the survey have CSS classes applied to them that will remain the same even as we update elements of the survey interface. These can be used to target survey elements with your site's global stylesheet.
Note: while we'll do our best to support any advanced customization of the survey UI you'd like to do, we may not be able to assist with troubleshooting all styling issues.
Title | CSS class | Description |
Button | iterate__button | All UI buttons excluding the close button and the previous/next buttons, including question types where a button is used to respond |
Button active | iterate__buttonActive | An active state for Button |
Close button | iterate__closeButton | The close button used to dismiss the prompt or survey |
Container | iterate__container | A container element that wraps both the optional prompt and the survey itself |
Container border | iterate__container__border | A top border element applied to both the prompt and survey |
Footer | iterate__footer | The footer panel of the survey that contains previous/next question buttons and Iterate branding |
Footer - next button | iterate__footer__next | Next question button in the survey footer |
Footer - previous button | iterate__footer__previous | Previous question button in the survey footer |
Prompt | iterate__prompt | A container element for the optional prompt that appears before the user opts in to the survey (can be used to target elements that only appear in the prompt, vs. the survey itself) |
Question | iterate__question | A container element that wraps each question within the survey |
Question text | iterate__questionPrompt | The text of each question in the survey |
Radio button | iterate__radio | Radio buttons, for the question types in which they appear |
Rating images | iterate__ratingImages | A container element that wraps each of the images in the Rating question type |
Survey | iterate__survey | A container element for the survey itself (can be used to target elements that only appear in the survey, vs. the prompt) |
Segment | iterate__segment | Each of the segments of the survey progress bar that is displayed across the top of the survey container |
Segment active | iterate__segmentActive | An active state for Segment |