How To Have Two Column Payment Form

Last Update: March 2, 2017

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 {
display:none;
}
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)

Version 4 builder: Payment Settings > Advanced tab > Shrink to "Off":




Version 3 builder: Drop arrow > Make sure it appears as "Shrink":






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



5 Comments...


   
riverleasoap (January 17, 2014 at 12:06 PM)

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

View Answer


   
motb276 (August 04, 2014 at 02:18 AM)

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

View Answer


   
Trafuse (November 12, 2014 at 07:49 PM)

Great! Worked perfectly. Thanks


   
indahdreamwarrior (February 24, 2016 at 09:54 PM)

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

Kindly

View Answer


   
Frankieandswiss (February 12, 2017 at 11:49 AM)

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

View Answer


Send Comment