All Collections
Website Surveys
FAQs
Using CSS to Customize the Website Survey Interface
Using CSS to Customize the Website Survey Interface
Updated over a week ago

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

Did this answer your question?