How To Have Two Column Payment Form

This guide will show how to minimize the length of your Payment Form that has a lot of products/items on it.

Allowing the users to view all information all at once on a form is an important aspect of an efficient and useable form.

Stylize the default single-column payment field into a two-column formation by injecting CSS codes into the payment form.

Custom CSS Codes:

.form-product-item {
border: 1px solid #EFEFEF;
margin: 5px;
width: 293px;
display: inline-block !important;
vertical-align: top;
}

.form-product-item + br {
display:none;
}

br + br {
float: left;
padding-top: 20px;
}

.form-product-item > img + .form-product-item-detail {
    width: 100%;
}

Additional Information:

To effectively use the CSS code, make sure the form's expand property is seen as Shrink (which means Expand is enabled)

Payment Settings > Advanced tab > Shrink to "Off":

** This feature is more applicable for payment forms that have 3 and more products/items available. 

The suggested CSS codes are still effective and will dynamically format the form, even when more products/items are added or removed.

Example form https://www.jotformpro.com/form/31737621196962.

Example with 5 products/items only

Example with 3 products/items only

For comments and suggestions, post it in the comments box below.