What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    giving format to a payment form

    Asked by heron on July 04, 2013 at 02:42 AM

    Hello!! I previously asked this but I cant answer in the question I posted.

    Asked by Heron on July 03, 2013 at 03:48 AM 

    Hello

    I need your help. I need several columns in my payment form because I have many products. But when I formatted to 2 columns the name of the product is not complete neither the price, you can´t see it well. I know i can format and hive an "enter" to the name of the product but I don´t know how. I want to put the price below the name not on the right.


    Additional to these i want that the "total" appears in the bottom, not in the right. And last, the total doesn´t works all the time.

     

    Hope you can Help me!

    thanks

    Heron

    Page URL:
    http://sidengo.com/heronfeuchter#dot-hf-online-store 

    Screenshot

     

    and you guys answered this

    Hi Heron,

    Can you please take a look at this cloned form if this is something you want to achieve in your form?

    http://www.jotformpro.com/form/31822112225945

    If yes, please use and inject this custom css into your form.

    .form-product-item img {

    width: 60px;

    height: 60px;

    }

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

    }

    If you need further assistance, do let us know.

    Thank you!

    _______________________

     

    The thing is when I put this code in custom css I can only look 3 products because they all apprear in one row! Not in 3 columns as showed in the "clone".  I know it´s something easy for you guys, but I really need your help. 

    And I also need the Price appears BELOW the name, not on the same line. 

    Hope you can help!

    Heron

     

    Page URL:
    http://heronfeuchter.com/#dot-hf-online-store

    Screenshot
    payment form format style size uploads name
  • Profile Image
    JotForm Support

    Answered by Morian on July 04, 2013 at 04:21 AM

    Hi Heron! 

    The code that my colleague provided was correct. In addition to that, one thing you can do to fix that is to expand the products.

    On your Form Builder, just right-click on the products and click on Expand

    That should fix it.