{"id":35737,"date":"2022-07-25T16:54:02","date_gmt":"2019-10-25T12:23:55","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=35737"},"modified":"2023-11-24T10:49:48","modified_gmt":"2023-11-24T10:49:48","slug":"how-to-apply-custom-css-to-your-form","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/","title":{"rendered":"How to apply custom CSS to your 123FormBuilder form"},"content":{"rendered":"\n<p>Our <a href=\"\/\">form builder<\/a> offers many build-in theme options that you can choose from. Basically, you can change just about anything on your web form, from text font and color to the style of the submit button.<\/p>\n\n\n\n<p>Additionally, you can go the extra mile and emphasize the look of your <a href=\"\/web-forms\/\">web forms<\/a> with custom CSS codes using our CSS form generator. In this article, we will show you a few alterations that you can bring to your form fields.<\/p>\n\n\n\n<p>First, go to the <b>Design<\/b> section. Next, click on the <b>Add custom CSS<\/b> button. Here you can create and paste all your CSS codes to stylize the form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png\" alt=\"Add custom CSS\" class=\"wp-image-47941\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-300x168.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-768x430.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1536x859.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Now that you know where the location of the codes will be, let&#8217;s check some general CSS codes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Input<\/b> &#8211; these attributes will change&nbsp;all input fields.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-role=control] input[data-role=i123-input]:not([type=radio]):not([type=checkbox]):not([type=reset]):not([type=hidden]):not([data-no-theme]), #form div[data-role=control] select[data-role=i123-input], #form div[data-role=control] textarea[data-role=i123-input], #form div[data-role=control] div[data-role=i123-input]:not([data-type=file]), #form div[data-role=control] div[data-role=i123-input][data-type=file] &gt; div[data-role=upload-overlay], #form div[data-role=control] div[data-role=i123-input][data-type=file] &gt; div[data-role=abort-all-uploads], #form div[data-role=control][data-type=check-box] input[data-role=other], #form div[data-role=control][data-type=radio] input[data-role=other], #form div[data-role=\"control\"] div[data-role=\"price-container\"], #form div[data-role=\"control\"] div[data-role=\"price-container\"] &gt; input, #form div[data-role=\"control\"] div[data-role=\"input-container\"], #form div[data-role=\"control\"] div[data-role=\"input-container\"] &gt; input\n\n{ \nbackground-color:#add8e6!important; \n}<\/pre>\n\n\n\n<p>With this code, we changed the background color of the input boxes to a light blue color. You can further add as many CSS properties and style your form as you need. Here is the result:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-277.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-277-1024x557.png\" alt=\"\" class=\"wp-image-47942\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-277-1024x557.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-277-300x163.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-277-768x418.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-277-1536x835.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-277.png 1912w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Placeholder text<\/b> &#8211; change the color of the information found in an input field. (e.g. Street Address, City, First, Last).<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-role=control] input::placeholder\n\n{ \ncolor: #5bd9cc!important; \n}\n\n\n\n<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.45.15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.45.15-1024x557.png\" alt=\"\" class=\"wp-image-47945\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.45.15-1024x557.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.45.15-300x163.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.45.15-768x418.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.45.15-1536x835.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.45.15.png 1912w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Choices<\/b> &#8211; change the appearance of the choices (Single choice and Multiple choice fields).<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-role=\"control\"] label[data-role=\"choice\"] span[data-role=\"option-text\"]\n\n{ \ncolor:#00b300!important; \nfont-size:15px; \nfont-weight:bold; \n}\n\n<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.01-1024x557.png\" alt=\"Choices CSS\" class=\"wp-image-47947\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.01-1024x557.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.01-300x163.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.01-768x418.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.01-1536x835.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.01.png 1912w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Dropdown placeholder text<\/b><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">div[data-ui-role=ui-element][data-type=dropdown]&gt;div[data-role=dropdown-skin]\n\n{ \ncolor:#7e7e7e!important; \nfont-size:11px; \nfont-weight:bold; \nfont-style:italic; \n}\n\n\n<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.38.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.38-1024x557.png\" alt=\"Dropdown placeholder CSS\" class=\"wp-image-47948\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.38-1024x557.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.38-300x163.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.38-768x418.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.38-1536x835.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.46.38.png 1912w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Buttons<\/b> &#8211; adjust the shape and style of your form buttons with this CSS code.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form button[data-role]\n\n{ \nfont-family: 'Open Sans', sans-serif; \nfont-size: 14px; \nfont-weight: normal; \nfont-style: normal; \nline-height: 2em; \npadding: 0px 15px; \nmargin: 0 8px 0 calc(16px \/ 2); \nborder-width: 1px; \nborder-style: solid; \nborder-radius:50%; \nmin-height: calc( 0px + 2em + 35px );\nmargin-top: 8px; \n}<\/pre>\n\n\n\n<p>This code will create rounded buttons. To see the effect click on Preview on the top right corner.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.47.36.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.47.36-1024x557.png\" alt=\"Buttons CSS\" class=\"wp-image-47949\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.47.36-1024x557.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.47.36-300x163.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.47.36-768x418.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.47.36-1536x835.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.47.36.png 1912w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Label text<\/b><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-role=control] label[data-role=label], #form div[data-role=container][data-type=likert-wrapper] label[data-role=label], #form div[data-role=container][data-type=repeatable] label[data-role=label]\n\n{ \nfont-size:18px!important; \ncolor:#8f98ff!important; \nfont-style:italic; \n}\n\n\n<\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.21.25.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.21.25-1024x525.png\" alt=\"Label text CSS\" class=\"wp-image-45115\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.21.25-1024x525.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.21.25-300x154.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.21.25-768x394.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.21.25-1536x788.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.21.25-2048x1050.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Form Header text<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form&gt;div[data-role=page]&gt;div[data-role=page-header] h1, #form&gt;div[data-role=page]&gt;div[data-role=page-header] h2, #form&gt;div[data-role=page]&gt;div[data-role=page-header] h3, #form&gt;div[data-role=page]&gt;div[data-role=page-header] h4, #form&gt;div[data-role=page]&gt;div[data-role=page-header] h5, #form&gt;div[data-role=page]&gt;div[data-role=page-header] h6\n\n{ \ncolor:#ac3d2c!important; \n}\n\n<\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.22.21.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.22.21-1024x525.png\" alt=\"Form header CSS\" class=\"wp-image-45116\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.22.21-1024x525.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.22.21-300x154.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.22.21-768x394.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.22.21-1536x788.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.22.21-2048x1050.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><b>HTML Block fields<\/b><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-role=control][data-type=html-block] *\n\n{ \ncolor:#ac3d2c!important; \n}\n\n<\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.08.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.08-1024x525.png\" alt=\"HTML block CSS\" class=\"wp-image-45117\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.08-1024x525.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.08-300x154.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.08-768x394.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.08-1536x788.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.08-2048x1050.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><b>Text content fields<\/b><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-role=control] h1, #form div[data-role=control] h2, #form div[data-role=control] h3, #form div[data-role=control] h4, #form div[data-role=control] h5, #form div[data-role=control] h6\n\n{ \ncolor:#ac3d2c!important; \n}\n\n<\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.55.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.55-1024x525.png\" alt=\"Heading CSS\" class=\"wp-image-45118\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.55-1024x525.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.55-300x154.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.55-768x394.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.55-1536x788.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/11\/Screenshot-2022-11-01-at-10.23.55-2048x1050.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Instruction text<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-role=\"control\"] dt[data-role=\"instructions\"]\n{ \ncolor:#ac3d2c!important; \n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Our form builder offers many build-in theme options that you can choose from. Basically, you can change just about anything on your web form, from text font and color to the style of the submit button. Additionally, you can go the extra mile and emphasize the look of your web forms with custom CSS codes [&hellip;]<\/p>\n","protected":false},"author":49,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[125],"tags":[],"class_list":["post-35737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tricks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Help: How to style forms with CSS | 123FormBuilder<\/title>\n<meta name=\"description\" content=\"Learn more about how to style forms with CSS to make your web forms all the more powerful and better looking. Nothing compares to a good design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to apply custom CSS to your 123FormBuilder form\" \/>\n<meta property=\"og:description\" content=\"Learn more about how to style forms with CSS to make your web forms all the more powerful and better looking. Nothing compares to a good design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-25T12:23:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T10:49:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png\" \/>\n<meta name=\"author\" content=\"Julia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Julia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Help: How to style forms with CSS | 123FormBuilder","description":"Learn more about how to style forms with CSS to make your web forms all the more powerful and better looking. Nothing compares to a good 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:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/","og_locale":"en_US","og_type":"article","og_title":"How to apply custom CSS to your 123FormBuilder form","og_description":"Learn more about how to style forms with CSS to make your web forms all the more powerful and better looking. Nothing compares to a good design.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2019-10-25T12:23:55+00:00","article_modified_time":"2023-11-24T10:49:48+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png","type":"","width":"","height":""}],"author":"Julia","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Julia","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/"},"author":{"name":"Julia","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843"},"headline":"How to apply custom CSS to your 123FormBuilder form","datePublished":"2019-10-25T12:23:55+00:00","dateModified":"2023-11-24T10:49:48+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/"},"wordCount":264,"commentCount":8,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png","articleSection":["CSS Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/","name":"Help: How to style forms with CSS | 123FormBuilder","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png","datePublished":"2019-10-25T12:23:55+00:00","dateModified":"2023-11-24T10:49:48+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843"},"description":"Learn more about how to style forms with CSS to make your web forms all the more powerful and better looking. Nothing compares to a good design.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-3-1024x573.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-apply-custom-css-to-your-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"How to apply custom CSS to your 123FormBuilder form"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843","name":"Julia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1b07bbd30c86170f8eb191468f69aaeab7b6cfddcd35ceaf4099ab76a5dccb06?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FJulia%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1b07bbd30c86170f8eb191468f69aaeab7b6cfddcd35ceaf4099ab76a5dccb06?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FJulia%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b07bbd30c86170f8eb191468f69aaeab7b6cfddcd35ceaf4099ab76a5dccb06?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FJulia%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"Julia"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/julia-unguras123formbuilder-com\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=35737"}],"version-history":[{"count":29,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35737\/revisions"}],"predecessor-version":[{"id":47951,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35737\/revisions\/47951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=35737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=35737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=35737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}