{"id":139,"date":"2026-04-25T16:13:12","date_gmt":"2026-04-25T16:13:12","guid":{"rendered":"https:\/\/ghlcss.com\/blog\/?p=139"},"modified":"2026-04-25T16:14:44","modified_gmt":"2026-04-25T16:14:44","slug":"ghl-order-form-css","status":"publish","type":"post","link":"https:\/\/ghlcss.com\/blog\/ghl-order-form-css\/","title":{"rendered":"GHL Order Form CSS: How to Style a Premium Checkout Experience"},"content":{"rendered":"<style>.kb-table-of-content-nav.kb-table-of-content-id139_5e8af8-fc .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;border-top-left-radius:10px;border-bottom-right-radius:10px;}.kb-table-of-content-nav.kb-table-of-content-id139_5e8af8-fc .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id139_5e8af8-fc .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id139_5e8af8-fc .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id139_5e8af8-fc .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id139_5e8af8-fc .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}<\/style>\n\n\n<p>Do you want your <strong>GoHighLevel (GHL)<\/strong> checkout page to look like a high-end e-commerce site? The standard GHL order form is functional, but it can look a bit &#8220;boxed-in.&#8221; By using <strong>GHL CSS<\/strong>, you can clean up the input fields, customize the &#8220;Complete Order&#8221; button, and add trust signals that reduce cart abandonment.<\/p>\n\n\n\n<p>In this guide, we will show you how to transform your 1-step and 2-step order forms. This is a critical final step in your funnel, especially after you&#8217;ve optimized your .<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns139_5b97c8-32{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns139_5b97c8-32 .kt-button{font-weight:normal;font-style:normal;}.kt-btns139_5b97c8-32 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns139_5b97c8-32 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns139_5b97c8-32 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns139_5b97c8-32 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns139_5b97c8-32 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns139_5b97c8-32 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns139_5b97c8-32 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns139_5b97c8-32\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn139_a87711-f6.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn139_a87711-f6.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn139_a87711-f6.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn139_a87711-f6.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn139_a87711-f6 kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"https:\/\/link.leadsflex.com\/schedule-quickcall\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Get a Free Custom Growth Plan Call<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Why Checkout Design is the Key to Revenue<\/h2>\n\n\n\n<p>The checkout page is where the most &#8220;friction&#8221; happens. If the form looks outdated or confusing, the user might hesitate to enter their credit card details. A polished, branded order form creates a &#8220;seamless&#8221; transition from your sales page to the final purchase.<\/p>\n\n\n\n<p>Read this: <a href=\"https:\/\/ghlcss.com\/blog\/ghl-opt-in-page-design-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">GHL Opt-In Page Design<\/a>: 7 Best Practices for High-Converting Forms<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits of Custom Order Form CSS:<\/h3>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items139_6c2321-7d:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items139_6c2321-7d ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items139_6c2321-7d ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items139_6c2321-7d ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items139_6c2321-7d ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items139_6c2321-7d kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-139_35a83f-af .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-139_35a83f-af\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>Reduced Friction:<\/strong> Make form fields larger and easier to click on mobile.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-139_8f0182-69 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-139_8f0182-69\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>Higher Trust:<\/strong> Add a &#8220;Safe &amp; Secure&#8221; badge or a custom border that highlights the payment area.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-139_ef5ccd-44 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-139_ef5ccd-44\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>Branded UX:<\/strong> Ensure your and brand colors continue all the way to the &#8220;Thank You&#8221; page.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Standard Order Form vs. Custom CSS Order Form<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Feature<\/strong><\/td><td><strong>Standard GHL Form<\/strong><\/td><td><strong>Custom CSS Order Form<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Input Fields<\/strong><\/td><td>Default grey borders<\/td><td>Soft shadows &amp; brand-colored focus states<\/td><\/tr><tr><td><strong>Button<\/strong><\/td><td>Standard &#8220;Complete Order&#8221;<\/td><td>Animated<\/td><\/tr><tr><td><strong>Product List<\/strong><\/td><td>Simple text<\/td><td>Highlighted &#8220;Offer Boxes&#8221; with icons<\/td><\/tr><tr><td><strong>Mobile View<\/strong><\/td><td>Standard stacking<\/td><td>Optimized spacing<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3 Essential CSS Snippets for Order Forms<\/h2>\n\n\n\n<p>Copy and paste these snippets into your <strong>Page Settings &gt; Custom CSS<\/strong> to give your checkout a professional lift.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Highlight the &#8220;Order Summary&#8221; Box<\/h3>\n\n\n\n<p>This helps the user see exactly what they are buying by adding a subtle background color and border.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Make the &#8220;Complete Order&#8221; Button Pulse<\/h3>\n\n\n\n<p>An animated button draws the eye to the final action, increasing the chance of a successful sale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Customize Input Field Focus<\/h3>\n\n\n\n<p>Make it clear which box the user is typing in by adding a branded &#8220;glow&#8221; to the active field.<\/p>\n\n\n\n<p><strong>Read this: <a href=\"https:\/\/ghlcss.com\/blog\/how-to-make-ghl-funnel-look-professional\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Make Your GHL Funnel Look Professional<\/a> (Even If You Are Not a Designer)<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices for Checkout UX<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Simplify the Header<\/h3>\n\n\n\n<p>Remove the main navigation from your checkout page. You don&#8217;t want users clicking away to your &#8220;About Me&#8221; page when they should be finishing their purchase.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use High Contrast for the &#8220;Price&#8221;<\/h3>\n\n\n\n<p>The total price should be bold and easy to find. If you have multiple items, use CSS to make the &#8220;Total&#8221; line stand out with a slightly larger font size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add &#8220;Visual Proof&#8221; Nearby<\/h3>\n\n\n\n<p>Place a testimonial or a &#8220;Money Back Guarantee&#8221; icon right next to the order form. You can use to style these trust elements so they look modern and clean.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns139_a6acc4-b6{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns139_a6acc4-b6 .kt-button{font-weight:normal;font-style:normal;}.kt-btns139_a6acc4-b6 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns139_a6acc4-b6 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns139_a6acc4-b6 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns139_a6acc4-b6 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns139_a6acc4-b6 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns139_a6acc4-b6 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns139_a6acc4-b6 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns139_a6acc4-b6\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn139_c82af7-10.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn139_c82af7-10.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn139_c82af7-10.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn139_c82af7-10.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn139_c82af7-10 kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"http:\/\/gohighlevel.com\/30-day-trial?fp_ref=leadsflex\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Claim Your $10K Bonuses + Free Funnels<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Can I style 1-step and 2-step order forms differently?<\/h3>\n\n\n\n<p>Yes. You can use specific to target only the <code>.ghl-2-step-order<\/code> class or the <code>.ghl-order-form<\/code> class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I hide the &#8220;Coupon Code&#8221; box if I don&#8217;t need it?<\/h3>\n\n\n\n<p>If you aren&#8217;t using coupons, you can hide that specific div using <code>display: none;<\/code> to keep the form as short as possible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Is it safe to use CSS on payment forms?<\/h3>\n\n\n\n<p>Yes. CSS only changes the &#8220;look&#8221; of the form. It does not touch the secure credit card processing handled by Stripe or PayPal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Your <strong>GHL Order Form<\/strong> is the most valuable part of your funnel. By spending just a few minutes adding rounded corners, branded buttons, and clear spacing, you can significantly lower your cart abandonment rate. Start with a simple button color change today and watch your revenue grow!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want your GoHighLevel (GHL) checkout page to look like a high-end e-commerce site? The standard GHL order form is functional, but it can look a bit &#8220;boxed-in.&#8221; By using GHL CSS, you can clean up the input fields, customize the &#8220;Complete Order&#8221; button, and add trust signals that reduce cart abandonment. In this&#8230;<\/p>\n","protected":false},"author":1,"featured_media":140,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-setup-guides"],"_links":{"self":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":1,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions\/141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media\/140"}],"wp:attachment":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}