JotForm User Guide / Advanced Features /

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;

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


  • Lrichmond

    I got it to work - sorry to have bothered you

  • 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.