User Guide

How To Have Two Column Payment Form

Last Update: May 7, 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)

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.


5 Comments...

  • riverleasoap

    How do you have columns with sub headings? My form takes the subheading into account and all my products are out of alignment.
    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

  • Trafuse

    Great! Worked perfectly. Thanks

  • indahdreamwarrior

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

    Kindly

  • 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

Send Comment