How to make two column payment form

  • talen
    Asked on March 17, 2016 at 6:15 AM
    is there by any chance possible to make the ordering list in two columns? or else there will be a lot of scrolling, the list will be quite long ...
  • beril JotForm UI Developer
    Replied on March 17, 2016 at 7:54 AM

    It is possible to make two column payment form.

    At the first, we will click on gear icon then choose shrink option as you see below:

    How to make two column payment form Image 1 Screenshot 30

     

    After that, if we add the CSS code below it will work as expected.

    .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;

     

    }

     

    Here is how it works:

    How to make two column payment form Image 2 Screenshot 41

     

  • talen
    Replied on March 18, 2016 at 7:47 AM

    HI.

     

    I'´ve done this, but it does not seem to work with my responsive site in Adobe muse ... also the tex get cut of...: "Artikkel 1234. Hur...."

    https://form.jotformeu.com/60761421462349

    How to make two column payment form Image 1 Screenshot 20

  • talen
    Replied on March 18, 2016 at 8:15 AM

    ok, I seemd to get the buttons at bottom quit ok. I would like the "Print form-button next too "Tøm skjema" but it's ok.

    https://form.jotformeu.com/60761421462349

  • beril JotForm UI Developer
    Replied on March 18, 2016 at 9:34 AM

    For your first question, it is my mistake. Can you expand your payment field as you see below?

    How to make two column payment form Image 1 Screenshot 30

    At that situation, it will work properly.=)

    How to make two column payment form Image 2 Screenshot 41

    Let us know, if you need further assistance.

  • beril JotForm UI Developer
    Replied on March 18, 2016 at 9:53 AM

    I've created a separate thread for you, so anyone in the support staff will be able to assist you with your specific requirement. Please follow up there:

    https://www.jotform.com/answers/797604

  • talen
    Replied on March 21, 2016 at 3:35 AM

    ok, thank you, it looks quit nice now :)

  • beril JotForm UI Developer
    Replied on March 21, 2016 at 4:00 AM

    You're most welcome. We are glad to hear that, it is ok now.

    Feel free to contact us any time.