{"id":3274,"date":"2026-03-30T14:29:15","date_gmt":"2026-03-30T13:29:15","guid":{"rendered":"https:\/\/www.poll-hero.com\/docs\/custom-css\/"},"modified":"2026-09-04T13:51:36","modified_gmt":"2026-09-04T12:51:36","password":"","slug":"custom-css","status":"publish","type":"docs","link":"https:\/\/www.poll-hero.com\/en\/docs\/custom-css\/","title":{"rendered":"Custom CSS"},"content":{"rendered":"\n

With Custom CSS, you can perfectly adapt your survey to your brand and corporate design. Your surveys can be enhanced with your own font as well as special elements of your brand. <\/p>\n\n

In the survey creation, you will find the Custom CSS feature at the very bottom within the “Style” tab:<\/p>\n\n

\"\"<\/a><\/figure>\n\n
\n\n

If you want to use your website\u2019s font, you can simply use <\/p>\n\n

* { font-family: inherit!important; }<\/code><\/pre>\n\n
Then your website\u2019s font will be used throughout the entire survey.   <\/p>\n\n
\n\n
Layout & Container<\/h2>\n\n
    \n
  • .ph-wrapper<\/code><\/li>\n\n\n\n
  • .ph-survey<\/code><\/li>\n<\/ul>\n\n
    works only for standalone survey which has no Shadow DOM<\/code><\/p>\n\n
      \n
    • .ph-survey-host<\/code><\/li>\n\n\n\n
    • .ph-survey-host--full-image<\/code><\/li>\n\n\n\n
    • .ph-survey-host--side-image<\/code><\/li>\n\n\n\n
    • .ph-box-inner<\/code><\/li>\n\n\n\n
    • .ph-box-outer<\/code><\/li>\n\n\n\n
    • .ph-bg--left<\/code><\/li>\n\n\n\n
    • .ph-bg--main<\/code><\/li>\n\n\n\n
    • .ph-bg--right<\/code><\/li>\n<\/ul>\n\n
      works only for onsite survey<\/code><\/p>\n\n
        \n
      • .ph-survey-minimized<\/code><\/li>\n\n\n\n
      • .ph-overlay<\/code><\/li>\n<\/ul>\n\n
        Header & Branding<\/h2>\n\n
          \n
        • .ph-header<\/code><\/li>\n\n\n\n
        • .ph-header__branding<\/code><\/li>\n\n\n\n
        • .ph-header__close<\/code><\/li>\n\n\n\n
        • .ph-topbar<\/code><\/li>\n\n\n\n
        • .ph-topbar__back<\/code><\/li>\n\n\n\n
        • .ph-topbar__close<\/code><\/li>\n\n\n\n
        • .ph-topbar--close-only<\/code><\/li>\n\n\n\n
        • .ph-branding<\/code><\/li>\n\n\n\n
        • .ph-branding__logo<\/code><\/li>\n\n\n\n
        • .ph-branding__text<\/code><\/li>\n\n\n\n
        • .ph-title<\/code><\/li>\n\n\n\n
        • .ph-subtitle<\/code><\/li>\n<\/ul>\n\n
          Avatar<\/h2>\n\n
            \n
          • .ph-avatar<\/code><\/li>\n\n\n\n
          • .ph-avatar__info<\/code><\/li>\n\n\n\n
          • .ph-avatar__name<\/code><\/li>\n\n\n\n
          • .ph-avatar__title<\/code><\/li>\n<\/ul>\n\n
            Questions & Text<\/h2>\n\n
              \n
            • .ph-question__body<\/code><\/li>\n\n\n\n
            • .ph-question__title<\/code><\/li>\n\n\n\n
            • .ph-question__description<\/code><\/li>\n\n\n\n
            • .ph-length-hint<\/code><\/li>\n<\/ul>\n\n
              Buttons<\/h2>\n\n
                \n
              • .ph-btn--primary<\/code><\/li>\n\n\n\n
              • .ph-btn--secondary<\/code><\/li>\n\n\n\n
              • .ph-btn--action<\/code><\/li>\n<\/ul>\n\n
                works only for standalone survey<\/code><\/p>\n\n
                  \n
                • .ph-extra-btn<\/code><\/li>\n\n\n\n
                • .ph-extra-btn-container<\/code><\/li>\n<\/ul>\n\n
                  Input fields (Inputs)<\/h2>\n\n
                    \n
                  • .ph-input--checkbox<\/code><\/li>\n\n\n\n
                  • .ph-input--radio<\/code><\/li>\n\n\n\n
                  • .ph-input--text-inline<\/code><\/li>\n\n\n\n
                  • .ph-input--short (short free text)<\/code><\/li>\n\n\n\n
                  • .ph-input--long (long free text)<\/code><\/li>\n\n\n\n
                  • .ph-input--email<\/code><\/li>\n<\/ul>\n\n
                    Answer options (Standard)<\/h2>\n\n
                      \n
                    • .ph-options<\/code><\/li>\n\n\n\n
                    • .ph-option<\/code><\/li>\n<\/ul>\n\n
                      Rating (Stars, NPS, etc.)<\/h2>\n\n
                        \n
                      • .ph-rating--large<\/code><\/li>\n\n\n\n
                      • .ph-rating--small<\/code><\/li>\n\n\n\n
                      • .ph-rating__elements<\/code><\/li>\n\n\n\n
                      • .ph-rating__element<\/code><\/li>\n\n\n\n
                      • .ph-rating__btn--star<\/code><\/li>\n\n\n\n
                      • .ph-rating__btn--nps<\/code><\/li>\n\n\n\n
                      • .ph-rating__btn--number<\/code><\/li>\n\n\n\n
                      • .ph-rating__btn--full<\/code><\/li>\n\n\n\n
                      • .ph-rating__context<\/code><\/li>\n\n\n\n
                      • .ph-rating__label<\/code><\/li>\n<\/ul>\n\n
                        Emoji<\/h2>\n\n
                          \n
                        • .ph-emoji<\/code><\/li>\n\n\n\n
                        • .ph-emoji__item<\/code><\/li>\n<\/ul>\n\n
                          Matrix<\/h2>\n\n
                            \n
                          • .ph-matrix<\/code><\/li>\n\n\n\n
                          • .ph-matrix__container<\/code><\/li>\n\n\n\n
                          • .ph-matrix__row<\/code><\/li>\n<\/ul>\n\n
                            Dropdown<\/h2>\n\n
                              \n
                            • .ph-dropdown__btn<\/code><\/li>\n\n\n\n
                            • .ph-dropdown__answer<\/code><\/li>\n\n\n\n
                            • .ph-dropdown__arrow<\/code><\/li>\n\n\n\n
                            • .ph-dropdown__content<\/code><\/li>\n\n\n\n
                            • .ph-dropdown__list<\/code><\/li>\n<\/ul>\n\n
                              Ranking<\/h2>\n\n
                                \n
                              • .ph-ranking<\/code><\/li>\n\n\n\n
                              • .ph-ranking__item<\/code><\/li>\n\n\n\n
                              • .ph-ranking__item--dragging<\/code><\/li>\n\n\n\n
                              • .ph-ranking__item--drag-over<\/code><\/li>\n\n\n\n
                              • .ph-ranking__drag-icon<\/code><\/li>\n\n\n\n
                              • .ph-ranking__dropdown<\/code><\/li>\n\n\n\n
                              • .ph-ranking__icon<\/code><\/li>\n\n\n\n
                              • .ph-ranking__number<\/code><\/li>\n\n\n\n
                              • .ph-ranking__number-block<\/code><\/li>\n\n\n\n
                              • .ph-ranking__text<\/code><\/li>\n<\/ul>\n\n
                                Progress bar (Progress Bar)<\/h2>\n\n
                                  \n
                                • .ph-progress<\/code><\/li>\n\n\n\n
                                • .ph-progress__track<\/code><\/li>\n\n\n\n
                                • .ph-progress__fill<\/code><\/li>\n\n\n\n
                                • .ph-progress__info<\/code><\/li>\n\n\n\n
                                • .ph-progress__label<\/code><\/li>\n\n\n\n
                                • .ph-progress__label-row<\/code><\/li>\n\n\n\n
                                • .ph-process-bar<\/code><\/li>\n\n\n\n
                                • .ph-process-bar__segment<\/code><\/li>\n<\/ul>\n\n
                                  Opt-in & Warnings<\/h2>\n\n
                                    \n
                                  • .ph-optin<\/code><\/li>\n\n\n\n
                                  • .ph-optin__label<\/code><\/li>\n\n\n\n
                                  • .ph-optin__notice<\/code><\/li>\n<\/ul>\n\n
                                    Warnings<\/h2>\n\n
                                      \n
                                    • .ph-warning (reached maximum allowed selections in a multi-select question )<\/code><\/li>\n\n\n\n
                                    • .ph-error (failing to answer a required question or entering an invalid email address)<\/code><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
                                      With Custom CSS, you can perfectly adapt your survey to your brand and corporate design. Your surveys can be enhanced with your own font as well as special elements of your brand. In the survey creation, you will find the Custom CSS feature at the very bottom within the “Style” tab: If you want to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_category":[87],"doc_tag":[],"class_list":["post-3274","docs","type-docs","status-publish","hentry","doc_category-design"],"acf":[],"year_month":"2026-09","word_count":291,"total_views":"22","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Chris von PollHero","author_nicename":"chris_pollhero","author_url":"https:\/\/www.poll-hero.com\/en\/author\/chris_pollhero\/"},"doc_category_info":[{"term_name":"design","term_url":"https:\/\/www.poll-hero.com\/en\/docs\/design\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/docs\/3274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/comments?post=3274"}],"version-history":[{"count":3,"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/docs\/3274\/revisions"}],"predecessor-version":[{"id":4444,"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/docs\/3274\/revisions\/4444"}],"wp:attachment":[{"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/media?parent=3274"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/doc_category?post=3274"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.poll-hero.com\/en\/wp-json\/wp\/v2\/doc_tag?post=3274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}