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 |
| All UI buttons excluding the close button and the previous/next buttons, including question types where a button is used to respond |
Button active |
| An active state for Button |
Close button |
| The close button used to dismiss the prompt or survey |
Container |
| A container element that wraps both the optional prompt and the survey itself |
Container border |
| A top border element applied to both the prompt and survey |
Dark mode |
| A container element that applies to surveys that have their appearance set to Dark |
Dark mode auto |
| A container element that applies to surveys that have their appearance set to Auto (respects the OS appearance style Light/Dark) |
Emoji option |
| A container element that wraps each of the images in the Emoji question type |
Footer |
| The footer panel of the survey that contains previous/next question buttons and Iterate branding |
Footer - next button |
| Next question button in the survey footer |
Footer - previous button |
| Previous question button in the survey footer |
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 |
| A container element that wraps each question within the survey |
Question text |
| The text of each question in the survey |
Radio button |
| Radio buttons, for the question types in which they appear |
Rating images |
| A container element that wraps each of the images in the Rating question type |
Selected option |
| An active state for the selected answer option |
Survey |
| A container element for the survey itself (can be used to target elements that only appear in the survey, vs. the prompt) |
Segment |
| Each of the segments of the survey progress bar that is displayed across the top of the survey container |
Segment active |
| An active state for Segment |