How To Have Two Column Payment Form

October 4, 2021

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.

Two Column Product List

The option to change the layout can be found in your Product List’s settings.

Product List - Change Layout

Custom CSS Code

Some of the old themes may not support this feature but fret not, you can use the following CSS code if this is the case with your form. Stylize the default single-column payment field into a two-column formation by injecting CSS codes into the payment form.

.form-product-item {
border: 1px solid #eee;
margin: 5px;
width: calc(50% - 20px);
vertical-align: top;
display: inline-block !important;
}
.form-product-item+br,
.form-product-container+br {
display: none;
}
.form-product-item img {
width: 100%;
margin-bottom: 10px;
}
.form-product-item>img+.form-product-item-detail {
width: calc(100% - 40px);
padding: 0 20px 10px;
}
.form-product-item-detail>.form-checkbox {
position: absolute;
top: 10px;
left: 10px;
width: 18px;
height: 20px;
}
.form-product-details {
display: block;
}

Example form: https://www.jotform.com/212403280219950

Additional Information

Depending on the theme, you may need to toggle the Product List’s “Shrink” property.

Product List - Shrink

** 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 with 5 products/items only:

Product List - 5 Items

Example with 3 products/items only:

ProductList - 3 Items

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

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo CommentBe the first to comment.