Two column payment form

  • Profile Image
    swillliams284
    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 (https://form.jotform.com/80457260853156) 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
    John_Benson
    Answered on February 19, 2018 at 08:27 PM

    Please check my cloned form: https://form.jotform.com/80498227824970

    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. 

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    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 {

    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;

    }

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

  • Profile Image
    swillliams284
    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
    ...