{"id":146,"date":"2023-09-08T08:23:46","date_gmt":"2023-09-08T08:23:46","guid":{"rendered":"https:\/\/www.veeform.com\/blog\/?page_id=146"},"modified":"2026-04-13T16:02:01","modified_gmt":"2026-04-13T16:02:01","slug":"advanced-styling","status":"publish","type":"page","link":"https:\/\/www.veeform.com\/blog\/advanced-styling\/","title":{"rendered":"Advanced styling"},"content":{"rendered":"<p>Usually, styling your quiz is done in the &#8220;Theme settings&#8221; section (cf screenshot below). Those styles apply to all the slides of your form and helps maintain a consistency between them.<\/p>\n<p>However, you also have the freedom to create more advanced styling using custom CSS. Let&#8217;s see how.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-149 \" src=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1.jpg\" alt=\"\" width=\"966\" height=\"508\" srcset=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1.jpg 1901w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1-300x158.jpg 300w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1-1024x539.jpg 1024w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1-768x404.jpg 768w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1-1536x808.jpg 1536w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>First, you need to activate the &#8220;Custom CSS&#8221; option in your &#8220;Theme settings&#8221;.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-151 size-full\" src=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-2.jpg\" alt=\"\" width=\"498\" height=\"253\" srcset=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-2.jpg 498w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-2-300x152.jpg 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>A text field appears, where you can enter CSS that will be applied to the form. Here are some useful CSS selectors that you can use to apply styles to elements :<\/p>\n<p><strong>.vfrm-ctn<\/strong> : This selects the main container.<br \/>\n<strong>.vf-q-title<\/strong> : This selects the question title.<br \/>\n<strong>.vf-q-desc<\/strong> : This selects the question description.<br \/>\n<strong>.vf-btn<\/strong> : This selects a button (usually the question submit button).<br \/>\n<strong>.vf-q-choice<\/strong> : This selects a choice item.<br \/>\n<strong>.vf-q-pr-prdct<\/strong> : This selects a recommended product frame.<br \/>\n<strong>.vf-q-pr-title<\/strong> : This selects a recommended product title.<br \/>\n<strong>.vf-q-pr-price<\/strong> : This selects a recommended product price.<br \/>\n<strong>.vf-q-pr-prdct .vf-c-vdd<\/strong> : This selects a recommended product variant dropdown (with then .vf-c-dd-selected being the selected part and .vf-c-dd-options being the menu list part).<br \/>\n<strong>.vf-q-pr-add .vf-c-dd<\/strong> : This selects a recommended product quantity dropdown (with then .vf-c-dd-selected being the selected part and .vf-c-dd-options being the menu list part).<br \/>\n<strong>.vf-q-pr-add .vf-btn<\/strong> : This selects a recommended product button (&#8220;Add to cart&#8221; or &#8220;View details&#8221;).<\/p>\n<h2>General example<\/h2>\n<p>Let&#8217;s see an example where I change the font size and color of various elements :<\/p>\n<pre>.vfrm-ctn .vf-q-title {\r\n\u00a0 color: red;\r\n\u00a0 font-size: 2em;\r\n}\r\n.vfrm-ctn .vf-q-desc {\r\n\u00a0 color: blue;\r\n\u00a0 font-size: 0.8em;\r\n}\r\n.vfrm-ctn .vf-btn {\r\n\u00a0 background-color: green;\r\n\u00a0 color: purple;\r\n}\r\n.vfrm-ctn .vf-q-choice {\r\n\u00a0 background: purple;\r\n\u00a0 color: white;\r\n\u00a0 font-size: 2em;\r\n}<\/pre>\n<p>And the result is the following :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-154 size-full\" src=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-3.jpg\" alt=\"\" width=\"1488\" height=\"825\" srcset=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-3.jpg 1488w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-3-300x166.jpg 300w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-3-1024x568.jpg 1024w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-3-768x426.jpg 768w\" sizes=\"(max-width: 1488px) 100vw, 1488px\" \/><\/p>\n<p>A few comments :<\/p>\n<ul>\n<li>When you write CSS, the change should be visible immediately in the builder (no need to reload or click on the &#8220;Preview&#8221; button).<\/li>\n<li>I&#8217;ve added .vfrm-ctn before any other selector. I&#8217;m doing it to have enough <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Specificity\">specificity<\/a> to override the original styling. In case you&#8217;re not familiar with this, don&#8217;t worry : if you write a rule and it doesn&#8217;t seem to be applied, you can try adding <a href=\"https:\/\/www.w3schools.com\/css\/css_important.asp\">!important<\/a> between the end of your value and the semicolon (this will make your CSS rule override any other directly), like this :\n<pre>.vf-q-title {\r\n  color: red<strong>!important<\/strong>;\r\n}<\/pre>\n<\/li>\n<li>I&#8217;m using &#8220;em&#8221; <a href=\"https:\/\/www.w3schools.com\/cssref\/css_units.php\">units<\/a> instead of &#8220;px&#8221; (pixels) for the font size. I&#8217;m doing this because I&#8217;d like my texts to be smaller on tiny screens and &#8220;em&#8221; units will actually help achieve this as they are relative to a parent&#8217;s font size (and the main parent&#8217;s font size becomes smaller on tiny screens). If you use &#8220;px&#8221;, the size of your text will be the same on all devices.<\/li>\n<\/ul>\n<h2>Styling individual questions<\/h2>\n<p>You may want to style individual questions. To achieve this, you need a CSS selector that targets the specific question you want to style.<\/p>\n<p>To do this, click on the &#8220;Toggle question selectors&#8221; button.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-155 size-full\" src=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-4.jpg\" alt=\"\" width=\"480\" height=\"246\" srcset=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-4.jpg 480w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-4-300x154.jpg 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/p>\n<p>It will show a CSS selector for each question (it won&#8217;t change even if you re-order questions).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-156 size-full\" src=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-5.jpg\" alt=\"\" width=\"1896\" height=\"899\" srcset=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-5.jpg 1896w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-5-300x142.jpg 300w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-5-1024x486.jpg 1024w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-5-768x364.jpg 768w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-5-1536x728.jpg 1536w\" sizes=\"(max-width: 1896px) 100vw, 1896px\" \/><\/p>\n<p>Click on &#8220;Copy&#8221; for the selector you want. And then, write a CSS rule starting with the question selector (or with .vfrm-ctn and then the question selector).<\/p>\n<p>For instance, if I enter the following :<\/p>\n<pre>#q-175n9ur2 .vf-q-title {\r\n\u00a0 color: green;\r\n}<\/pre>\n<p>Then only the question that I targeted will have its title green!<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-158 size-full\" src=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-6.jpg\" alt=\"\" width=\"1494\" height=\"820\" srcset=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-6.jpg 1494w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-6-300x165.jpg 300w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-6-1024x562.jpg 1024w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-6-768x422.jpg 768w\" sizes=\"(max-width: 1494px) 100vw, 1494px\" \/><\/p>\n<h2>Adding a custom font<\/h2>\n<p>To add a custom font that is not in our list, you&#8217;ll need to add &#8220;Custom CSS&#8221; as well, like this one (&#8220;&lt;URL of the font&gt;&#8221; being a link to a woff, ttf or otf file, and &#8220;&lt;Name of the font&gt;&#8221; being of course the name of the font) :<\/p>\n<pre>@font-face {\r\n  font-family: \"<strong>&lt;Name of the font&gt;<\/strong>\";\r\n  src: url(\"<strong>&lt;URL of the font&gt;<\/strong>\");\r\n  font-weight: normal;\r\n  font-style: normal;\r\n}\r\n.vfrm-ctn, .vfrm-ctn input, .vfrm-ctn textarea, .vfrm-ctn button {\r\n  font-family: \"<strong>&lt;Name of the font&gt;<\/strong>\", Arial;\r\n}<\/pre>\n<p>And it should do the trick :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-164 size-full\" src=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-10.jpg\" alt=\"\" width=\"468\" height=\"445\" srcset=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-10.jpg 468w, https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-10-300x285.jpg 300w\" sizes=\"(max-width: 468px) 100vw, 468px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Miscellaneous<\/h2>\n<p>Hiding the quantity selector of the recommended products :<\/p>\n<pre>.vf-c-qdd {\r\n  display: none;\r\n}<\/pre>\n<p>Centering all the questions content :<\/p>\n<pre>.vf-q-item {\r\n  text-align: center;\r\n}\r\n.vf-q-choice-list {\r\n  justify-content: center;\r\n}<\/pre>\n<p>Centering only the welcome screen content :<\/p>\n<pre>.vf-q-t-welcome {\r\n  text-align: center;\r\n}<\/pre>\n<p>In case you have questions, you can reach out to <a href=\"mailto:support@veeform.com\">support@veeform.com<\/a> and we&#8217;ll do our best to help you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Usually, styling your quiz is done in the &#8220;Theme settings&#8221; section (cf screenshot below). Those styles apply to all the slides of your form and helps maintain a consistency between them. However, you also have the freedom to create more advanced styling using custom CSS. Let&#8217;s see how. &nbsp; First, you need to activate the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"powered_cache_disable_cache":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Advanced styling - VeeForm Blog<\/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:\/\/www.veeform.com\/blog\/advanced-styling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced styling - VeeForm Blog\" \/>\n<meta property=\"og:description\" content=\"Usually, styling your quiz is done in the &#8220;Theme settings&#8221; section (cf screenshot below). Those styles apply to all the slides of your form and helps maintain a consistency between them. However, you also have the freedom to create more advanced styling using custom CSS. Let&#8217;s see how. &nbsp; First, you need to activate the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.veeform.com\/blog\/advanced-styling\/\" \/>\n<meta property=\"og:site_name\" content=\"VeeForm Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-13T16:02:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1.jpg\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.veeform.com\/blog\/advanced-styling\/\",\"url\":\"https:\/\/www.veeform.com\/blog\/advanced-styling\/\",\"name\":\"Advanced styling - VeeForm Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.veeform.com\/blog\/#website\"},\"datePublished\":\"2023-09-08T08:23:46+00:00\",\"dateModified\":\"2026-04-13T16:02:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.veeform.com\/blog\/advanced-styling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.veeform.com\/blog\/advanced-styling\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.veeform.com\/blog\/advanced-styling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.veeform.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced styling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.veeform.com\/blog\/#website\",\"url\":\"https:\/\/www.veeform.com\/blog\/\",\"name\":\"VeeForm Blog\",\"description\":\"Everything you need to know about forms and quizzes.\",\"publisher\":{\"@id\":\"https:\/\/www.veeform.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.veeform.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.veeform.com\/blog\/#organization\",\"name\":\"VeeForm\",\"url\":\"https:\/\/www.veeform.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.veeform.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/04\/social.png\",\"contentUrl\":\"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/04\/social.png\",\"width\":1024,\"height\":1024,\"caption\":\"VeeForm\"},\"image\":{\"@id\":\"https:\/\/www.veeform.com\/blog\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Advanced styling - VeeForm Blog","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:\/\/www.veeform.com\/blog\/advanced-styling\/","og_locale":"en_US","og_type":"article","og_title":"Advanced styling - VeeForm Blog","og_description":"Usually, styling your quiz is done in the &#8220;Theme settings&#8221; section (cf screenshot below). Those styles apply to all the slides of your form and helps maintain a consistency between them. However, you also have the freedom to create more advanced styling using custom CSS. Let&#8217;s see how. &nbsp; First, you need to activate the [&hellip;]","og_url":"https:\/\/www.veeform.com\/blog\/advanced-styling\/","og_site_name":"VeeForm Blog","article_modified_time":"2026-04-13T16:02:01+00:00","og_image":[{"url":"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/09\/style-1.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.veeform.com\/blog\/advanced-styling\/","url":"https:\/\/www.veeform.com\/blog\/advanced-styling\/","name":"Advanced styling - VeeForm Blog","isPartOf":{"@id":"https:\/\/www.veeform.com\/blog\/#website"},"datePublished":"2023-09-08T08:23:46+00:00","dateModified":"2026-04-13T16:02:01+00:00","breadcrumb":{"@id":"https:\/\/www.veeform.com\/blog\/advanced-styling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.veeform.com\/blog\/advanced-styling\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.veeform.com\/blog\/advanced-styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.veeform.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Advanced styling"}]},{"@type":"WebSite","@id":"https:\/\/www.veeform.com\/blog\/#website","url":"https:\/\/www.veeform.com\/blog\/","name":"VeeForm Blog","description":"Everything you need to know about forms and quizzes.","publisher":{"@id":"https:\/\/www.veeform.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.veeform.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.veeform.com\/blog\/#organization","name":"VeeForm","url":"https:\/\/www.veeform.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.veeform.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/04\/social.png","contentUrl":"https:\/\/www.veeform.com\/blog\/wp-content\/uploads\/2023\/04\/social.png","width":1024,"height":1024,"caption":"VeeForm"},"image":{"@id":"https:\/\/www.veeform.com\/blog\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/pages\/146"}],"collection":[{"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":13,"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":673,"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/pages\/146\/revisions\/673"}],"wp:attachment":[{"href":"https:\/\/www.veeform.com\/blog\/wp-json\/wp\/v2\/media?parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}