How To Have Two Column Payment Form

Last Update: March 6, 2016

This guide will show how to minimize the length of your Payment Form that have 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 effective and use able form.


Stylize the default single-column payment field into 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)




** 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 form http://www.jotformpro.com/form/31737621196962

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.





4 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


Send Comment