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.

Custom CSS Codes:

.form-product-item {
border: 1px solid #EFEFEF;
margin: 5px;
width: 293px;
display: inline-block !important;
vertical-align: top;
}

.form-product-item + br {
display:none;
}

br + br {
float: left;
padding-top: 20px;
}

.form-product-item > img + .form-product-item-detail {
    width: 100%;
}


Additional Information:

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

Example form https://www.jotformpro.com/form/31737621196962.

Example with 5 products/items only

Example with 3 products/items only

For comments and suggestions, post it in the comments box below.

 

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support: https://www.jotform.com/contact/

Send Comment

7 Comments...

  • passionfordisaster

    I tried to use this code and it only shows one column on the left, it will not show or move anything to the right. All suggestions followed.

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

    Kindly

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