How to style a 2-step order/purchase form?

First, create your 1-step order form as explained here:

For Step 1, you want to have only the “next button” and for Step 2, you want to have all the buttons turned off. The submit button on the purchase form will submit the form.

Go to mobile view and check the section, grid, or box you’re adding the form to, has 0 padding. Grids and Sections load with 10px padding all around by default, which you need to make 0px using the style manager.

Add the form to your web page, then add the code below to Page Setting > CSS.

Remember!!! To remove the padding in a section or grid, use the Style Manager. Switch to the mobile view, and for all fields with input (e.g. email, phone, card number), make the necessary adjustments.

.form-control {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;   
    border-width: 2px !important;   
    border-radius: 0px !important;   /* increase the number for curved corners*/
    border-color: black !important;   /*line/border color*/
    font-family: "Poppins" !important;   
    font-size: 15px !important;   /*make sure you can still read the text on mobile*/
    color: black !important;   /*text-color*/
}

/*button*/
.default .btn-warning.disabled, .default .btn-warning:disabled, .default .btn:not(:disabled):not(.disabled) {   
    padding: 15px !important;   
    opacity: 1 !important;   
    background: #ffcb03 !important;   
    font-family: "Poppins" !important;   
    font-size: 24px !important;   /*make sure you can still read the button on mobile*/
    font-weight: 900 !important;
    box-shadow: 0px 0px 6px 0px black !important;
    margin-top: 0.8em !important; /*creates spacing above button*/
}

.form-group {   
    margin-bottom: 0.7rem !important;
}

/*Hides a border*/
.product-item {   
    border-bottom: none !important;
}

/*Removes the image of the product in the purchase form*/
.product_image {
    display: none !important;
}

/*Change product and price font*/
.product-item .product_content .product_text .product_header .product_title h4, .product-item .product_content .product_text .product_header .product_price {
    font-family: "Poppins" !important;
}

.product_title > h4, .product_price {
    font-family: "Poppins" !important;
}

.product-item .product_content {
    padding: 0px !important;
}

.product-item {
    margin-bottom: 0px !important;
}

.formio-form .pagination.default {
    display: none !important;
}

.formio-wizard-nav-container.list-inline li:last-child, .formio-wizard-nav-container.list-inline li, .default .btn:not(:disabled):not(.disabled) {
    width: 100% !important;
    color: black !important;
    border: none !important;
    border-radius: 5px !important;
}

.btn-wizard-nav-submit {
    display: none !important;
}

.btn-wizard-nav-next {
    text-indent: -9999px !important;
    line-height: 0 !important;
}

.btn-wizard-nav-next:after {
    content: "Click To Continue";
    text-indent: 0;
    display: flex;
    justify-content: center !important;
    line-height: initial;
    color: black !important;
}

.btn-wizard-nav-next:disabled {
    /*visibility: hidden; !important;*/   
    height: 70px !important;
    padding: 0px !important;
    width: 100% !important;
    opacity: 1 !important;
    background: #ffcb03 !important;
    font-family: "Poppins" !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: black !important;
    display: inline;
    justify-content: center !important;
}

.btn-wizard-nav-next:disabled {
    line-height: 0 !important;
    text-indent: -9999px !important;
}