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

    Quantity + Product Image creates a mess

    Asked by burak2102 on June 30, 2012 at 03:38 PM

    Anyone has a solution for this? Thank you all.

    Page URL:
    http://form.jotformeu.com/form/21676610556355

    Screenshot
  • Profile Image
    JotForm Support

    Answered by abajan on June 30, 2012 at 04:52 PM

    Yes, there's a solution. I'll post it later today/tonight.

  • Profile Image
    JotForm Support

    Answered by abajan on June 30, 2012 at 11:09 PM

    Okay, please do the following:

    1. Load the form into the form builder and click its payment field

    2. In the toolbar at the top, click Label Align > Left

    3. With the payment field still selected, click its Wizard icon

    4. When the wizard pops up, click Next > Next > Add New Product

    5. Name the product, give it a price of zero (0), enter an image URL (you may use one of the image URLs already used for another product) and click Save Product

    6. Give the new product a quantity option just like you did with the other products

    7. Click and drag the new product from the bottom of the list to the top

    8. Click Next > Finish

    9. Inject the following CSS:

    .form-header {
    color: #FD8F29;
    }

    #label_8 {
    padding-bottom: 0;
    margin-bottom: -100px;
    }

    .form-product-item {
    position: relative;
    padding-left: 62px;
    }

    .form-product-item img {
    position: absolute;
    top: 5px;
    left: -7px;
    }

    .form-product-image,
    #input_8_1028,
    [for="input_8_1028"],
    #input_8_quantity_1028_0,
    [for="input_8_quantity_1028_0"] {
    display: none;
    }

    #id_8 .form-sub-label-container {
    margin-top: -10px;
    }

    That should do it. Please let us know if the result is acceptable or if you need clarification on anything.

  • Profile Image

    Answered by burak2102 on July 01, 2012 at 05:15 PM

    Thank you. That seems to work. I hope with a future update I get rid of the blank product at the top. Thanks for your help.