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.
Um, i’ve been trying to do these all day idk if I’m doing right or if it’s just not working but I really need help with this.
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.
I got it to work - sorry to have bothered you
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
I wish to make a 2 column contact form. Any advise on the css code for this?
Kindly
Great! Worked perfectly. Thanks
I added the css code from above but no two columns just one really long section from left to right..............even with "shrink" mode
How do you have columns with sub headings? My form takes the subheading into account and all my products are out of alignment.
Thanks