{"id":20777,"date":"2020-07-23T16:00:45","date_gmt":"2020-07-23T16:00:45","guid":{"rendered":"https:\/\/ec2-54-72-10-141.eu-west-1.compute.amazonaws.com\/docs\/?post_type=knowledgebase&#038;p=20777"},"modified":"2026-02-26T15:06:14","modified_gmt":"2026-02-26T15:06:14","slug":"styling","status":"publish","type":"knowledgebase","link":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/","title":{"rendered":"Survey Design"},"content":{"rendered":"\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Getting your survey design right is not just a matter of respecting your brand guidelines or providing a pleasant experience to your users. A well designed survey also yields higher completion rates and thus better customer insights. Refiner offers various styling options to make your survey blend perfectly with your brand and guarantee highest response rates.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-1024x587.png\" alt=\"\" class=\"wp-image-25553\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-1024x587.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-800x458.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-768x440.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-1536x880.png 1536w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39.png 1775w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Screenshot showing Refiner&#8217;s survey design options for Web App Surveys<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"layout\">Survey layouts<\/h2>\n\n\n\n<p>Refiner offers the same type of survey experience across all delivery methods. Depending on the delivery method and the client device (desktop or mobile), slightly different survey layout options are available as described below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"web\">Web App Surveys<\/h3>\n\n\n\n<p>Web App Surveys can have different layout options when viewed on a desktop or tablet device. Which layout you choose for your survey has not just an impact on the user experience, but might also impact <a href=\"https:\/\/refiner.io\/blog\/in-app-survey-response-rates\/\" target=\"_blank\" rel=\"noreferrer noopener\">survey response rates<\/a>. As a rule of thumb: the more intrusive and visible a survey is (e.g. centered layout), the higher the response rates.<\/p>\n\n\n\n<p>The following options are available for Web App Surveys on Desktop clients:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Top left, Top centered, Top right<\/li>\n\n\n\n<li>Bottom left, Bottom Centered, Bottom right<\/li>\n\n\n\n<li>Modal <\/li>\n\n\n\n<li>Top Banner, Bottom Banner<\/li>\n<\/ul>\n\n\n\n<p>On mobile devices, popup surveys are displayed with a bottom slide-in on mobile devices.<\/p>\n\n\n\n<p>Below you&#8217;ll see a screenshot of some popular options.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"680\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.20.31-1024x680.png\" alt=\"\" class=\"wp-image-24644\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.20.31-1024x680.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.20.31-800x531.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.20.31-768x510.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.20.31.png 1215w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Another popular choice are centered surveys with a backdrop overlay.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.22.47-1024x609.png\" alt=\"\" class=\"wp-image-24646\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.22.47-1024x609.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.22.47-800x476.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.22.47-768x457.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.22.47.png 1339w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Lastly, you can also use our banner layout to make use of the entire screen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.21.57-1024x559.png\" alt=\"\" class=\"wp-image-24645\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.21.57-1024x559.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.21.57-800x436.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.21.57-768x419.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.21.57.png 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>When viewed on a mobile device, Web-app Surveys are always displayed bottom centered to ensure a good user experience. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"927\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1.png\" alt=\"\" class=\"wp-image-24643\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1-800x724.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1-768x695.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"mobile\">Mobile App Surveys<\/h3>\n\n\n\n<p>Native <a href=\"https:\/\/refiner.io\/docs\/kb\/in-product-surveys\/in-product-surveys\/#mobile\">mobile app surveys<\/a> launched with our Mobile SDKs can be displayed as Bottom Slide-in or in Fullscreen mode.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"927\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1.png\" alt=\"\" class=\"wp-image-24643\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1-800x724.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-08-29-at-14.17.16-1024x927-1-768x695.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"850\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-03-at-15.46.06-1024x850.png\" alt=\"\" class=\"wp-image-25049\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-03-at-15.46.06-1024x850.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-03-at-15.46.06-800x664.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-03-at-15.46.06-768x638.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-03-at-15.46.06.png 1392w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"pages\">Survey Pages<\/h3>\n\n\n\n<p><a href=\"https:\/\/refiner.io\/docs\/kb\/pages\/shareable-survey-links\/\">Survey Pages<\/a>, as well as the landing pages of <a href=\"https:\/\/refiner.io\/docs\/kb\/email\/send-surveys-by-email\/\">Email Surveys<\/a>, offer a layout similar to our survey widgets. Most of the design options are available (colors, rounded corners, progress bar). In addition, you can also upload your own logo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-18-at-16.26.45-1024x815.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Styling options<\/h2>\n\n\n\n<p>Refiner offers the same type of survey experience across all delivery methods. We provide similar design options for <a href=\"https:\/\/refiner.io\/docs\/kb\/in-product-surveys\/web-app-surveys\/\">Web App Surveys<\/a>, <a href=\"https:\/\/refiner.io\/docs\/kb\/mobile-app-surveys\/mobile-app-surveys\/\">Mobile App Surveys<\/a>, <a href=\"https:\/\/refiner.io\/docs\/kb\/pages\/shareable-survey-links\/\">Survey Pages<\/a> and <a href=\"https:\/\/refiner.io\/docs\/kb\/email\/send-surveys-by-email\/\">Email Surveys<\/a> as shown in the table below. Each option is described more in detail further below on this page.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td><\/td><td>In-Product Web<\/td><td>In-Product Mobile SDK<\/td><td>Survey Pages<\/td><\/tr><tr><td><a href=\"#colors\">Adaptive color palettes<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td><a href=\"https:\/\/refiner.io\/docs\/wp-admin\/post.php?post=20777&amp;action=edit#corners\">Rounded corners<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td><a href=\"#progress-bar\">Progress bar<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td><a href=\"#border\">Highlighted border<\/a><\/td><td>\u2713<\/td><td>&#8211;<\/td><td>&#8211;<\/td><\/tr><tr><td><a href=\"#banner-images\">Banner images<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>&#8211;<\/td><\/tr><tr><td><a href=\"#avatar\">Avatar images<\/a><\/td><td>\u2713<\/td><td>Bottom Sheet<\/td><td>&#8211;<\/td><\/tr><tr><td><a href=\"#font\">Font style<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td><a href=\"#logo\">Upload logo<\/a><\/td><td>&#8211;<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td><a href=\"#hide-close\">Hide close button<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>&#8211;<\/td><\/tr><tr><td><a href=\"#backdrop\">Backdrop overlay<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>&#8211;<\/td><\/tr><tr><td><a href=\"#back-navigation\">Back navigation<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td><a href=\"#text-direction\">Text direction<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td><a href=\"#branding\">Hide Refiner Branding<\/a><\/td><td>\u2713<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"colors\">Adaptive color palettes<\/h3>\n\n\n\n<p>Refiner allows you to choose an Accent Color and Background Color for your surveys. Both, the Accent and Background Colors, are used in different shades in your surveys for input fields and buttons.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"464\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.34.38.png\" alt=\"\" class=\"wp-image-24670\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.34.38.png 1014w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.34.38-800x366.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.34.38-768x351.png 768w\" sizes=\"auto, (max-width: 1014px) 100vw, 1014px\" \/><\/figure><\/div>\n\n\n<p>Depending on the brightness of background colors, Refiner will automatically set the text color either to Black or White. This mechanism ensures that your survey widget has enough contrast between text and background elements and that your survey is easy to read.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"progress-bar\">Progress Bar<\/h3>\n\n\n\n<p>If you surveys contains more than 2-3 questions, it might be helpful to display a progress bar. The progress bar shows users how many questions a survey has in total and how many are left.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"860\" height=\"405\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.53.16.png\" alt=\"\" class=\"wp-image-24659\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.53.16.png 860w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.53.16-800x377.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.53.16-768x362.png 768w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"corners\">Rounded corners<\/h3>\n\n\n\n<p>To better match the style of your application, you can choose between rounded or straight corner style.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"862\" height=\"312\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.58.49.png\" alt=\"\" class=\"wp-image-24660\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.58.49.png 862w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.58.49-800x290.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.58.49-768x278.png 768w\" sizes=\"auto, (max-width: 862px) 100vw, 862px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"border\">Highlighted border<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"674\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.36.55-1024x674.png\" alt=\"\" class=\"wp-image-24650\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.36.55-1024x674.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.36.55-800x527.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.36.55-768x506.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-09.36.55.png 1166w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"avatar\">Avatar image<\/h3>\n\n\n\n<p>Adding an avatar, name and job-title to the top section of your survey widget will instantly give it a personal touch and make it more relatable. This usually results in higher response rates and overal better response data quality.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"818\" height=\"402\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-17.57.37-1.png\" alt=\"\" class=\"wp-image-25537\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-17.57.37-1.png 818w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-17.57.37-1-800x393.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-17.57.37-1-768x377.png 768w\" sizes=\"auto, (max-width: 818px) 100vw, 818px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"font\">Font style<\/h3>\n\n\n\n<p>The default font of our surveys blend in nicely with most user interfaces and was optimized for high readability. By default, we are using the Roboto with a base font size of 16px. You can choose to use other popular fonts provided by <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts<\/a>, such as Inter, Poppins, Montserrat etc. You can also choose a smaller or bigger base font size. If you can&#8217;t find your preferred font in our list, please don&#8217;t hesitate to reach out to us.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-15-at-17.41.28-1024x543.png\" alt=\"\" class=\"wp-image-25817\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-15-at-17.41.28-1024x543.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-15-at-17.41.28-800x424.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-15-at-17.41.28-768x407.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-15-at-17.41.28-1536x814.png 1536w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-15-at-17.41.28.png 1890w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Banner images<\/h3>\n\n\n\n<p>Banner images are a great way to mirror you brand inside a Refiner survey. The option to upload custom banner images is available for In-product surveys on web and mobile.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"860\" height=\"550\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.16.56.png\" alt=\"\" class=\"wp-image-24665\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.16.56.png 860w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.16.56-800x512.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.16.56-768x491.png 768w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/figure><\/div>\n\n\n<p>You can upload one banner image per survey in the Design tab. You can also choose to upload specific banner images for each question individually.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"937\" height=\"677\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.18.38.png\" alt=\"\" class=\"wp-image-24666\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.18.38.png 937w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.18.38-800x578.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.18.38-768x555.png 768w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/figure><\/div>\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>As an alternative to banner images you can also include images in the body text of your survey <a href=\"https:\/\/refiner.io\/docs\/kb\/survey-editor\/markdown\/\">using Markdown syntax<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"logo\">Upload logo<\/h3>\n\n\n\n<p>Survey Pages and Email Surveys let you upload a logo that is displayed in the top section of the survey page. You can also upload a page icon which used by web browsers.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.29.59-1024x457.png\" alt=\"\" class=\"wp-image-24667\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.29.59-1024x457.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.29.59-800x357.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.29.59-768x343.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.29.59-1536x686.png 1536w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.29.59.png 1849w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"text-direction\">Text-direction<\/h3>\n\n\n\n<p>You can switch the text direction from Left-to-Right (LTR) to Right-to-left (RTL). This setting might get overwritten for specific languages when using our <a href=\"https:\/\/refiner.io\/docs\/kb\/survey-editor\/multi-language-surveys\/\">Translations<\/a> feature.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"860\" height=\"374\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.02.54.png\" alt=\"\" class=\"wp-image-24661\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.02.54.png 860w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.02.54-800x348.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.02.54-768x334.png 768w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"hide-close\">Hide close button<\/h3>\n\n\n\n<p>You can choose to hide the &#8220;x&#8221; close button which is otherwise displayed in the top right corner of an in-product survey.<\/p>\n\n\n\n<p>We usually recommend to keep the close button visible to guarantee a good user experience. There are however various situations where hiding the close button makes sense. For example, when you running on onboarding survey with a centered modal layout and completing the survey is mandatory.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"905\" height=\"528\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-03-at-15.09.42.png\" alt=\"\" class=\"wp-image-24819\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-03-at-15.09.42.png 905w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-03-at-15.09.42-800x467.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-03-at-15.09.42-768x448.png 768w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"back-navigation\">Disable back navigation<\/h3>\n\n\n\n<p>Some survey question types will display a &#8220;Back&#8221; button when they are placed after the first element. As the name suggests, the button allows a user to navigate back to the previous question and modify their response. You can choose to disable back navigation for all questions in your survey. If disabled, users can&#8217;t modify a response once given.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"backdrop\">Customize backdrop overlay<\/h3>\n\n\n\n<p>A backdrop overlay is displayed for Web App Surveys using a centered modal layout, as well as native mobile surveys with bottom sheet layout. You can customize the color of the overlay and set an opacity level. You can also choose if a click on the overlay will close the survey or keep it open.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"549\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-26-at-16.44.41-1-1024x549.png\" alt=\"\" class=\"wp-image-25842\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-26-at-16.44.41-1-1024x549.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-26-at-16.44.41-1-800x429.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-26-at-16.44.41-1-768x412.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/03\/Screenshot-2024-03-26-at-16.44.41-1.png 1394w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"hide-branding\">Hide Refiner branding<\/h3>\n\n\n\n<p>Customers on a paid subscription can hide the Refiner branding from their surveys entirely. Surveys from users on a free plan will show a small link to Refiner in the bottom.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"862\" height=\"359\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.08.58.png\" alt=\"\" class=\"wp-image-24664\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.08.58.png 862w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.08.58-800x333.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-16-at-10.08.58-768x320.png 768w\" sizes=\"auto, (max-width: 862px) 100vw, 862px\" \/><\/figure><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"default-theme\">Default design settings<\/h2>\n\n\n\n<p>If you are planning to run multiple survey campaigns, you&#8217;ll likely want to set default values that will automatically applied to all newly created surveys. <\/p>\n\n\n\n<p>In the global settings of your environment (SETTINGS > DESIGN SETTINGS) you can set default values for the color theme, font settings, the widget position for Web App Surveys, etc.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"592\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.50.31-1024x592.png\" alt=\"\" class=\"wp-image-26285\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.50.31-1024x592.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.50.31-800x462.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.50.31-768x444.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.50.31-1536x888.png 1536w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.50.31-2048x1184.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"css\">Styling with CSS code<\/h2>\n\n\n\n<p>For advanced styling needs we are providing the option to inject custom CSS into surveys. Using custom CSS code opens up virtually endless styling possibilities, such as resizing the survey widget, adjust colors, padding, etc. <\/p>\n\n\n\n<p>The custom CSS code option is currently only available for customers on an Enterprise plan. We can unlock this option for customers on the Growth plan on request though. Please contact our team to get more information.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"644\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.34.45-1024x644.png\" alt=\"\" class=\"wp-image-26279\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.34.45-1024x644.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.34.45-800x503.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.34.45-768x483.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.34.45-1536x966.png 1536w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-10-at-15.34.45-2048x1287.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>You can inspect the HTML structure of our surveys in the survey editor. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-16-at-16.57.19-1024x538.png\" alt=\"\" class=\"wp-image-26247\" srcset=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-16-at-16.57.19-1024x538.png 1024w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-16-at-16.57.19-800x420.png 800w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-16-at-16.57.19-768x403.png 768w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-16-at-16.57.19-1536x807.png 1536w, https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-16-at-16.57.19-2048x1076.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>The CSS code will be applied to all surveys in your environment. The survey wrapper elements have various CSS classes that will help you to scope down the CSS code if needed, such as <em>.form-<\/em>bottom-centered, <em>.form-mobile-sdk<\/em>, <em>.form-&lt;survey-uuid&gt;<\/em>, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Getting your survey design right is not just a matter of respecting your brand guidelines or providing a pleasant experience to your users. A well designed survey also yields higher completion rates and thus better customer insights. Refiner offers various styling options to make your survey blend perfectly with your brand and guarantee highest [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","template":"","knowledgebase_tag":[],"class_list":["post-20777","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-customization"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","ab-block-post-grid-landscape":"","ab-block-post-grid-square":"","gb-block-post-grid-landscape":"","gb-block-post-grid-square":""},"post_excerpt_stackable_v2":"<p>Introduction Getting your survey design right is not just a matter of respecting your brand guidelines or providing a pleasant experience to your users. A well designed survey also yields higher completion rates and thus better customer insights. Refiner offers various styling options to make your survey blend perfectly with your brand and guarantee highest response rates. Screenshot showing Refiner&#8217;s survey design options for Web App Surveys Survey layouts Refiner offers the same type of survey experience across all delivery methods. Depending on the delivery method and the client device (desktop or mobile), slightly different survey layout options are available&hellip;<\/p>\n","category_list_v2":"","author_info_v2":{"name":"Moritz Dausinger","url":"https:\/\/refiner.io\/docs\/author\/user\/"},"comments_num_v2":"0 comments","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Survey Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Survey Design\" \/>\n<meta property=\"og:description\" content=\"Introduction Getting your survey design right is not just a matter of respecting your brand guidelines or providing a pleasant experience to your users. A well designed survey also yields higher completion rates and thus better customer insights. Refiner offers various styling options to make your survey blend perfectly with your brand and guarantee highest [...]Read More...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/\" \/>\n<meta property=\"og:site_name\" content=\"Refiner Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T15:06:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-1024x587.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/\",\"url\":\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/\",\"name\":\"Survey Design\",\"isPartOf\":{\"@id\":\"https:\/\/refiner.io\/docs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-1024x587.png\",\"datePublished\":\"2020-07-23T16:00:45+00:00\",\"dateModified\":\"2026-02-26T15:06:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#primaryimage\",\"url\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39.png\",\"contentUrl\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39.png\",\"width\":1775,\"height\":1017},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/refiner.io\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Survey Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/refiner.io\/docs\/#website\",\"url\":\"https:\/\/refiner.io\/docs\/\",\"name\":\"Refiner Documentation\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/refiner.io\/docs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/refiner.io\/docs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/refiner.io\/docs\/#organization\",\"name\":\"Refiner Documentation\",\"url\":\"https:\/\/refiner.io\/docs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png\",\"contentUrl\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png\",\"width\":400,\"height\":61,\"caption\":\"Refiner Documentation\"},\"image\":{\"@id\":\"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Survey Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/","og_locale":"en_US","og_type":"article","og_title":"Survey Design","og_description":"Introduction Getting your survey design right is not just a matter of respecting your brand guidelines or providing a pleasant experience to your users. A well designed survey also yields higher completion rates and thus better customer insights. Refiner offers various styling options to make your survey blend perfectly with your brand and guarantee highest [...]Read More...","og_url":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/","og_site_name":"Refiner Documentation","article_modified_time":"2026-02-26T15:06:14+00:00","og_image":[{"url":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-1024x587.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/","url":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/","name":"Survey Design","isPartOf":{"@id":"https:\/\/refiner.io\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#primaryimage"},"image":{"@id":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#primaryimage"},"thumbnailUrl":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39-1024x587.png","datePublished":"2020-07-23T16:00:45+00:00","dateModified":"2026-02-26T15:06:14+00:00","breadcrumb":{"@id":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/refiner.io\/docs\/kb\/customization\/styling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#primaryimage","url":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39.png","contentUrl":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-09-at-18.22.39.png","width":1775,"height":1017},{"@type":"BreadcrumbList","@id":"https:\/\/refiner.io\/docs\/kb\/customization\/styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/refiner.io\/docs\/"},{"@type":"ListItem","position":2,"name":"Survey Design"}]},{"@type":"WebSite","@id":"https:\/\/refiner.io\/docs\/#website","url":"https:\/\/refiner.io\/docs\/","name":"Refiner Documentation","description":"","publisher":{"@id":"https:\/\/refiner.io\/docs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/refiner.io\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/refiner.io\/docs\/#organization","name":"Refiner Documentation","url":"https:\/\/refiner.io\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png","contentUrl":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png","width":400,"height":61,"caption":"Refiner Documentation"},"image":{"@id":"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/20777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/comments?post=20777"}],"version-history":[{"count":123,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/20777\/revisions"}],"predecessor-version":[{"id":27163,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/20777\/revisions\/27163"}],"wp:attachment":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/media?parent=20777"}],"wp:term":[{"taxonomy":"knowledgebase_tag","embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase_tag?post=20777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}