Customizing Funnel + Website Order Forms
Code Example:
/* Order bump formatting */ .order-bump-container[data-v-e863c9b0] {background-color: #e2e419 !Important; border: none !Important;} .order-bump-container .main-section[data-v-e863c9b0] {background-color: #00897a !important;} .order-bump-container img[data-v-e863c9b0] {display: none !important;} .order-bump-container .headline[data-v-e863c9b0] {color: #ffffff !Important;} .oto-headline[data-v-e863c9b0] {color: #0b213f !important;} /* Order form formatting */ div.form-step {padding: 10px !Important; line-height: 1.5 !Important;} .two-setp-order-se-hflGTL .form-btn {background-color: transparent !Important;} .form-step .active {color: #0b213f !Important; font-family: poppins !Important; text-transform: uppercase !Important;} .form-btn {padding: 15px !Important; border-radius: 0px !Important;} .divider-form {background: #3ebda7 !important;} .divider-form i, .step2 i {color: #3ebda7 !important;} .address-title {color: #0b213f !important; font-family: poppins !Important; text-transform: uppercase !Important;} .product-title {margin-bottom: 10px !Important;} .product-description {margin-top: 10px !Important;} #two-setp-order-Yw2GhQW92 {color: #0b213f !Important; box-shadow: none !Important; padding: 10px !Important; background-color: #ffffff !important;} /* Blue button formatting */ #two-setp-order-se-hflGTL .form-btn { background-image: url('https://firebasestorage.googleapis.com/v0/b/highlevel-backend.appspot.com/o/location%2FcWsfuWkMg8WAwh1uHrqT%2Fimages%2F4749840a-f7ef-498e-a6b1-f2286bfa8283.png?alt=media') !important; background-repeat: no-repeat; background-size: 100% 100% !important; background-position: center center; border-radius: unset; padding: 12px 0;} .c-button buttonShadowN1 {box-shadow: none !Important;} .elBTN_b_1 {bordeR: none !Important;} #two-setp-order-se-hflGTL .form-btn .main-text {font-size: 24px;}
Alternative code from Funnel Executive
/* Order form formatting */ div.form-step {padding: 10px !Important; line-height: 1.5 !Important; color: #000000 !Important;} .form-step .active {color: #546b38 !Important; font-family: Josefin Sans !Important; text-transform: uppercase !Important;} .form-btn {margin-top: 15px !Important; background-color: #546b38 !Important; font-family: Josefin Sans !important; text-transform: uppercase !Important; padding: 15px !Important; border-radius: 0px !Important;} .product-title .item {color: #000000 !Important; font-family: Josefin Sans !Important; text-transform: uppercase !Important;} .address-title {color: #546b38 !important;} .product-title {margin-bottom: 10px !Important; color: #000000 !Important; font-family: Josefin Sans !Important; text-transform: uppercase !Important;} .product-description {margin-top: 10px !Important; color: #000000 !Important; font-family: Josefin Sans !Important;} .info {margin-top: 10px !Important;} .payment-form-row {background: #deb364 !Important; border-radius: 0px !Important;} .card-element-label {color: #000000 !Important;} .info .form-input, .shipping .form-input {margin-top: 0px !Important;} .shipping-title-wrapp {margin-bottom: 20px !Important;} .divider-form i, .step2 i {color: #546b38 !important;} .divider-form {background: #546b38 !important;} .container-order-form-two-step {border-radius: 0px !Important; border: 15px solid #e9e3d8 !Important;} /* Order bump formatting */ .bump--flashing-arrow {display: none !Important;} .oto-headline {color: #000000 !Important;} .order-bump-container p {color: #000000 !Important; padding-left: 38px !Important; padding-right: 38px !Important;} .order-bump-container .headline {color: #ffffff !Important;} .order-bump-container .main-section {padding-left: 15px !Important; padding-right: 15px !Important; border-radius: 0px !Important; background-color: #000000 !Important;} .order-bump-container {border-radius: 0px !Important; border: 1px solid #cde3da !Important; background-color: #cde3da !Important; padding: 15px !Important;}