Two column payment form

  • Profile Image
    Asked on February 19, 2018 at 05:15 PM

    Good Afternoon,

    I hope that you can help me with a question on creating a form with 2 "product" columns.  I have created a form that is single column that works fine for a listing of items that can be ordered.  However, it involves a fair amount of scrolling to be able to submit the order.  So what I would like to have is two columns of productrs, cutting the scrolling in half.

    So I copied the original form and increased the width of the form ( to have room for the two columns.  I shrank the field (Inappropriate Grandpa Products) and enabled the Move to new line option.  The item now takes less than half the width of the form.  However, If I create a new item/product, I can not get it to be on the same line as the first item, even if all items are "Shrunk".

    Any thoughts on what I'm missing here ?  Any help appreciated

  • Profile Image
    Answered on February 19, 2018 at 08:27 PM

    Please check my cloned form:

    Is that what you're trying to achieve? If yes, you can clone the form by following the guide below to check the custom CSS code I have added.

    You can also just copy the custom CSS code and add it to your form:

    .form-product-item {

    border: 1px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 350px;


    .form-product-item + br {



    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;


    Let us know if you need further assistance. Thank you.

  • Profile Image
    Answered on February 19, 2018 at 09:43 PM
    You are brilliant !!!!!!!!
    That is exactly what I was hoping for, clearly I wasn't searching for the correct terminology.
    Thank you very much, that was beyond easy to implement
    Scott Williams