{"id":1557,"date":"2022-07-25T16:52:31","date_gmt":"2012-08-21T08:45:02","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=1557"},"modified":"2023-11-24T10:13:09","modified_gmt":"2023-11-24T10:13:09","slug":"use-custom-css","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/","title":{"rendered":"Use Custom CSS to style your form"},"content":{"rendered":"\n<p>You can use your own CSS for styling forms. To start, go to the <b>Design<\/b> section of your web form and scroll to the bottom, where <strong>Add custom CSS <\/strong>button is available. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56.png\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"1024\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-358x1024.png\" alt=\"Add custom CSS\" class=\"wp-image-47909\" style=\"aspect-ratio:0.349609375;width:218px;height:auto\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-358x1024.png 358w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-105x300.png 105w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56.png 374w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Click on <b>Add custom CSS<\/b> and use the <b>Code<\/b> tab to type the CSS code or the <b>URL<\/b> tab to provide the URL to the CSS file located on your server.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-267.png\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"572\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-267.png\" alt=\"Custom CSS\" class=\"wp-image-47911\" style=\"aspect-ratio:0.6538461538461539;width:278px;height:auto\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-267.png 374w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-267-196x300.png 196w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>If you choose to <b>Load CSS from URL<\/b>, make sure that the URL leads to the content of your stylesheets. Here&#8217;s an example: <em>https:\/\/www.mydomain.com\/styles\/stylesheets.css<\/em>. If the URL does not contain the <em>.css<\/em> extension at the end, your CSS styles will not apply to the form.<\/p>\n\n\n\n<p>For even more examples, visit the <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/category\/documentation\/css-tricks\/\">CSS Tricks<\/a> section of our Knowledge Base.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can use your own CSS for styling forms. To start, go to the Design section of your web form and scroll to the bottom, where Add custom CSS button is available. Click on Add custom CSS and use the Code tab to type the CSS code or the URL tab to provide the URL [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[77,984],"class_list":["post-1557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes","tag-aa_formthemes","tag-how-to-add-custom-css"],"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 use custom CSS on forms | 123FormBuilder<\/title>\n<meta name=\"description\" content=\"If you want to use your own CSS for styling forms, you can do so by following our tutorial. You are able to add any custom CSS you want.\" \/>\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\/use-custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use Custom CSS to style your form\" \/>\n<meta property=\"og:description\" content=\"If you want to use your own CSS for styling forms, you can do so by following our tutorial. You are able to add any custom CSS you want.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-21T08:45:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T10:13:09+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-12.11.56-358x1024.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Help: How to use custom CSS on forms | 123FormBuilder","description":"If you want to use your own CSS for styling forms, you can do so by following our tutorial. You are able to add any custom CSS you want.","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\/use-custom-css\/","og_locale":"en_US","og_type":"article","og_title":"Use Custom CSS to style your form","og_description":"If you want to use your own CSS for styling forms, you can do so by following our tutorial. You are able to add any custom CSS you want.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2012-08-21T08:45:02+00:00","article_modified_time":"2023-11-24T10:13:09+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-358x1024.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/"},"author":{"name":"admin","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"headline":"Use Custom CSS to style your form","datePublished":"2012-08-21T08:45:02+00:00","dateModified":"2023-11-24T10:13:09+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/"},"wordCount":135,"commentCount":4,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-358x1024.png","keywords":["aa_formthemes","how to add custom css"],"articleSection":["Themes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/","name":"Help: How to use custom CSS on forms | 123FormBuilder","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-358x1024.png","datePublished":"2012-08-21T08:45:02+00:00","dateModified":"2023-11-24T10:13:09+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"description":"If you want to use your own CSS for styling forms, you can do so by following our tutorial. You are able to add any custom CSS you want.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-358x1024.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-12.11.56-358x1024.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/use-custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"Use Custom CSS to style your 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\/ac765b93d6689ec0f4ee6f6e040d66ea","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"admin"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/1557","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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=1557"}],"version-history":[{"count":30,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/1557\/revisions"}],"predecessor-version":[{"id":47912,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/1557\/revisions\/47912"}],"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=1557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=1557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=1557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}