{"id":1576,"date":"2022-07-25T16:54:21","date_gmt":"2012-08-21T08:55:21","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=1576"},"modified":"2023-11-24T10:00:19","modified_gmt":"2023-11-24T10:00:19","slug":"how-can-i-change-the-way-a-specific-form-field-looks","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/","title":{"rendered":"How can I change the way a specific form field looks?"},"content":{"rendered":"\n<p>You can do this by using CSS. Read about our <a href=\"\/full-css-form-customization.html\">CSS form generator<\/a> to learn more.<\/p>\n\n\n\n<p>In short, you need to retrieve the field ID or class by inspecting the form code and then apply your preferred CSS style to it in the&nbsp;<b>Design <\/b>section of your form. After you have the CSS code, all you have to do is to click on Add CSS button and input your code. <\/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-11.59.53.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-1024x573.png\" alt=\"Add custom css\" class=\"wp-image-47886\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-1024x573.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-300x168.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-768x430.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-1536x859.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Our form builder provides a substantial amount of design features that don&#8217;t require coding. Check out our <a href=\"\/form-designer\">Form Designer<\/a> page for more info.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can do this by using CSS. Read about our CSS form generator to learn more. In short, you need to retrieve the field ID or class by inspecting the form code and then apply your preferred CSS style to it in the&nbsp;Design section of your form. After you have the CSS code, all you [&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":[78,976],"class_list":["post-1576","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes","tag-aaa_formthemes","tag-add-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: Change the way a form field looks | 123FormBuilder<\/title>\n<meta name=\"description\" content=\"If you need to customize a specific field on your web form, you will need to use custom CSS. You can add your CSS code in the Design section.\" \/>\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-can-i-change-the-way-a-specific-form-field-looks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can I change the way a specific form field looks?\" \/>\n<meta property=\"og:description\" content=\"If you need to customize a specific field on your web form, you will need to use custom CSS. You can add your CSS code in the Design section.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-21T08:55:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T10:00:19+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-1024x573.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: Change the way a form field looks | 123FormBuilder","description":"If you need to customize a specific field on your web form, you will need to use custom CSS. You can add your CSS code in the Design section.","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-can-i-change-the-way-a-specific-form-field-looks\/","og_locale":"en_US","og_type":"article","og_title":"How can I change the way a specific form field looks?","og_description":"If you need to customize a specific field on your web form, you will need to use custom CSS. You can add your CSS code in the Design section.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2012-08-21T08:55:21+00:00","article_modified_time":"2023-11-24T10:00:19+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-1024x573.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\/how-can-i-change-the-way-a-specific-form-field-looks\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/"},"author":{"name":"admin","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"headline":"How can I change the way a specific form field looks?","datePublished":"2012-08-21T08:55:21+00:00","dateModified":"2023-11-24T10:00:19+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/"},"wordCount":106,"commentCount":2,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-1024x573.png","keywords":["aaa_formthemes","add css"],"articleSection":["Themes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/","name":"Help: Change the way a form field looks | 123FormBuilder","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-1024x573.png","datePublished":"2012-08-21T08:55:21+00:00","dateModified":"2023-11-24T10:00:19+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"description":"If you need to customize a specific field on your web form, you will need to use custom CSS. You can add your CSS code in the Design section.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-1024x573.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-1024x573.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-can-i-change-the-way-a-specific-form-field-looks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"How can I change the way a specific form field looks?"}]},{"@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\/1576","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=1576"}],"version-history":[{"count":14,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/1576\/revisions"}],"predecessor-version":[{"id":47887,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/1576\/revisions\/47887"}],"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=1576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=1576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}