{"id":35521,"date":"2019-09-19T15:53:35","date_gmt":"2019-09-19T15:53:35","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=35521"},"modified":"2023-11-24T10:55:37","modified_gmt":"2023-11-24T10:55:37","slug":"minimalistic-input-fields","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/","title":{"rendered":"Minimalistic Input Fields on 123FormBuilder"},"content":{"rendered":"\n<p>In this article, you will learn how to create minimalistic input fields using our <a href=\"\/\">form builder<\/a>. Start improving your form\u2019s design by incorporating CSS codes into your forms to enhance the user experience. <\/p>\n\n\n\n<p>CSS allows you to match the design of your forms with your webpage theme. If you aim for a minimalist design, this simple and easy CSS trick will achieve that using our <a href=\"\/full-css-form-customization.html\">CSS form generator<\/a>.<\/p>\n\n\n\n<p>With this CSS code, the input fields will have only the bottom line. <\/p>\n\n\n\n<p>To get started, from the <b>Form Editor<\/b> go to the <b>Design<\/b> section. Next, click on the <b>Add custom CSS<\/b> button.<\/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-6.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-6-1024x573.png\" alt=\"Add custom CSS\" class=\"wp-image-47959\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-1024x573.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-300x168.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-768x430.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-1536x859.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Here you will be placing the following CSS code:<\/p>\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     border-width: 0px 0px 1px 0px!important; \n}<\/pre>\n\n\n\n<p>This will change the input box&#8217;s layout to all your fields.<\/p>\n\n\n\n<p>That&#8217;s it! Here is the final result:<\/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-280.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"409\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-280-1024x409.png\" alt=\"Custom CSS\" class=\"wp-image-47963\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-280-1024x409.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-280-300x120.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-280-768x307.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-280-1536x614.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-280.png 1915w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn how to create minimalistic input fields using our form builder. Start improving your form\u2019s design by incorporating CSS codes into your forms to enhance the user experience. CSS allows you to match the design of your forms with your webpage theme. If you aim for a minimalist design, this [&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":[1034,1033],"class_list":["post-35521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tricks","tag-change-design-for-input-fields","tag-input-fields"],"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>Minimalistic Input Fields | 123FormBuilder Docs<\/title>\n<meta name=\"description\" content=\"Follow our documentation on how to style input fields on your online form and learn CSS tips and tricks.\" \/>\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\/minimalistic-input-fields\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Minimalistic Input Fields on 123FormBuilder\" \/>\n<meta property=\"og:description\" content=\"Follow our documentation on how to style input fields on your online form and learn CSS tips and tricks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-19T15:53:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T10:55:37+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-6-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=\"1 minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Minimalistic Input Fields | 123FormBuilder Docs","description":"Follow our documentation on how to style input fields on your online form and learn CSS tips and tricks.","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\/minimalistic-input-fields\/","og_locale":"en_US","og_type":"article","og_title":"Minimalistic Input Fields on 123FormBuilder","og_description":"Follow our documentation on how to style input fields on your online form and learn CSS tips and tricks.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2019-09-19T15:53:35+00:00","article_modified_time":"2023-11-24T10:55:37+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-6-1024x573.png","type":"","width":"","height":""}],"author":"Julia","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Julia","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/"},"author":{"name":"Julia","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843"},"headline":"Minimalistic Input Fields on 123FormBuilder","datePublished":"2019-09-19T15:53:35+00:00","dateModified":"2023-11-24T10:55:37+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/"},"wordCount":136,"commentCount":0,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-1024x573.png","keywords":["change design for input fields","input fields"],"articleSection":["CSS Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/","name":"Minimalistic Input Fields | 123FormBuilder Docs","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-1024x573.png","datePublished":"2019-09-19T15:53:35+00:00","dateModified":"2023-11-24T10:55:37+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843"},"description":"Follow our documentation on how to style input fields on your online form and learn CSS tips and tricks.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-1024x573.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-6-1024x573.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/minimalistic-input-fields\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"Minimalistic Input Fields on 123FormBuilder"}]},{"@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\/35521","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=35521"}],"version-history":[{"count":15,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35521\/revisions"}],"predecessor-version":[{"id":47965,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35521\/revisions\/47965"}],"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=35521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=35521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=35521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}