How to customize survey widgets with CSS [Surveys]

  • Home
  • Ask
  • How to customize survey widgets with CSS [Surveys]
Back

This article is for advanced users with CSS knowledge. You will find out what elements from a survey template can be used in the CSS editor.

We recommend using “Inspect element” from Developer Tools in Chrome or Firefox to inspect a survey popup/widget HTML code and find out the default styles for every element.

You can overwrite any element CSS style by adding in CSS editor (in “Design” tab) a line such as:

 html body #_mktz_survey ._mktz_question_text { font-size:22px; }

In order to exclude any conflict with your website default style, please use the blue prefix before any element.
In the lists below, you can find the ID of all elements which are part of a survey and can be overwritten.

Elements available for popup and widget template

  • #_mktz_survey – the main container
  • #_mktz_close – close button
  • #_mktz_header – header container
  • #_mktz_intro – first screen container
  • ._mktz_question – question container
  • #_mktz_next – specific “next” button
  • #_mktz_send – specific “send” button
  • #_mktz_start – specific “start” button
  • #_mktz_stop_ask – specific “stop asking” link
  • #_mktz_ask_later – specific “ask later” link
  • ._mktz_link – all links
  • ._mktz_btn – all buttons
  • ._mktz_question_text  – question text
  • ._mktz_question_help – question help
  • ._mktz_label – answer text
  • ._mktz_input – all text inputs
  • #_mktz_end – thank you message container
  • #_mktz_lead_intro – lead intro message container
  • #_mktz_lead – lead form container
  • #_mktz_privacy_btn – specific “privacy” link
  • #_mktz_privacy_content – privacy content container
  • ._mktz_consent – user consent container
Shopping Basket