User Guide


How To Have Two Column Payment Form

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.

CSS Codes:

.form-product-item {
border: 1px solid #EFEFEF;
margin: 1px;
float: center;
width: 293px;
.form-product-item + br {
br + b {
float: left;
padding-top: 20px;
.form-payment-total {
line-height: 50px;
margin: 1px;
border: 0px solid #EFEFEF;
border-radius: 4px;
padding: 15px;
padding-right: 193px;
padding-left: 6px;

(The CSS codes can also be copied from here)

Additional info:

* 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 is still effective and will dynamically format the form, even when more products/items are added or removed.

Example with 5 products/items only

Example with 3 products/items only

As usual, for your comments and suggestions, send us your message to JotForm Support Forum.

Send Comment


  • Frankieandswiss

    Hi there, I put the code in and it works great, except for the total price. This is all out of alignment. Advice to remedy? Thanks

  • indahdreamwarrior

    I wish to make a 2 column contact form. Any advise on the css code for this?


  • Trafuse

    Great! Worked perfectly. Thanks

  • motb276

    I added the css code from above but no two columns just one really long section from left to right..............even with "shrink" mode

  • riverleasoap

    How do you have columns with sub headings? My form takes the subheading into account and all my products are out of alignment.