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

    How can I prevent Payment Wizard from automatically collapsing variable boxes with multiple options?

    Asked by ericablair on January 23, 2015 at 05:53 PM

    Hi there,

    I am making a product order form through the Payment Wizard. Some of my products have no variation, some have 2-3.

    When the only variable is Quantity, the Quantity box automatically displays under the product name.

    When there is an additional variable, both the Quantity box and the Variable box are automatically collapsed until you click the checkbox next to the product name.

    How can I force the Quantity and Variable boxes to show even when someone has not yet selected the product? I would like all options to show when first viewing the form. Currently when they are collapsed, they cut off the photos that accompany the products.

    Screenshot attached with explanation.

    Page URL:
    http://www.thegrowingkitchen.org/rec-order-form-1

    Screenshot
    show sub-products sub products
  • Profile Image
    JotForm Support

    Answered by EltonCris on January 23, 2015 at 08:47 PM

    Hi,

    Append this CSS codes to your form, this should permanently display the sub-product options on that form.

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14) {

    height: 120px !important;

    }

    #cid_38 > span.form-product-item:nth-child(16){

    height: 100px !important;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form 

    Let us know if you have further questions. Thank you!

  • Profile Image

    Answered by ericablair on January 23, 2015 at 09:14 PM

    That worked! However, now there is an uneven gap between products with 1 variant and products with multiple variants. What can I do to fix this? Here's a screenshot. Thanks!

  • Profile Image

    Answered by Sean on January 24, 2015 at 09:43 AM

    Hello ericablair,

    I checked your form and I realize that there is a slight inequality with the spacing between each item now compared to the screenshot you took in the above thread. I have also realized that it appears that the space allotted for each items is not sufficient for all the products listed on your order form.



    I adjusted the height in the code provided by my colleague and this was the end result. You can update the code in the Custom Injected CSS option in the settings.

    #cid_38 > span.form-product-item:nth-child(8),
    #cid_38 > span.form-product-item:nth-child(14) {
    height: 140px !important;
    }



    You can view my cloned version of your form here: 
    http://form.jotformpro.com/form/50234284809961

    I hope that this is of some assistance to you. Feel free to contact us if further support is needed.


    Cheers!
    Sean

  • Profile Image

    Answered by ericablair on January 25, 2015 at 11:32 PM

    Thanks so much, that worked too. However for some reason one item on my product list is still appearing truncated. I have tried deleting this product and reentering it, but it is still having the same issue. Any ideas?

    Screenshot:

  • Profile Image
    JotForm Support

    Answered by Charlie on January 26, 2015 at 09:24 AM

    Hi,

    You could try using this code.

     

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14), #cid_38 > span:form-product-item:nth-child(16) {

        height : 210px !important;

    }

     

    Make sure to remove all CSS codes the may be of a conflict, I cloned your form and I see excess codes on it. Here's the cloned form that I have: http://form.jotformpro.com/form/50253508365958. To clone it, use this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Here's a screenshot of my CSS codes, there shouldn't be any similar codes that conflicts the design of the other.

     

    Let us know if you need more help.

    Thank you.

  • Profile Image

    Answered by ericablair on January 26, 2015 at 07:47 PM

    Thanks so much. That improved things, but for some reason one of the items on my list is still appearing truncated ("Mary's Way Salve") until you click on it. Any ideas?

  • Profile Image
    JotForm Support

    Answered by Charlie on January 26, 2015 at 08:53 PM

    Hi,

    I see that your products have sub-category on them, and they are being hidden when the height does not match the minimum height of the product element. 

     

    Would you like to just even out the spaces and let the sub-category to show? If that is the case, you can remove the code I shared above and use this instead:

    .form-product-item {

        min-height: 250px !important;

    }

    You can try checking the change I made here in my cloned form: http://form.jotformpro.com/form/50253508365958

     

    But if you prefer giving them each product specific heights so that they won't be cut off, just let us know which ones you want to adjust. Or you can just separate them,

    Previous code:

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14), #cid_38 > span:form-product-item:nth-child(16) {

        height : 210px !important;

    }

    New Code. Just separate the element pointing the "Mary's Way Salve".

    #cid_38 > span.form-product-item:nth-child(8),

    #cid_38 > span.form-product-item:nth-child(14) {

        height : 210px !important;

     

    }

    #cid_38 > span:form-product-item:nth-child(16) {

        height : 240px !important;

     

    }

    The pink highlight is the one pointing to "Mary's Way Salve", so you just need to separate it and give it it's own height value.

    I hope this helps.

    Thank you.

  • Profile Image

    Answered by ericablair on February 02, 2015 at 06:47 PM

    Hi there,

    This worked, but I felt that the form itself was too narrow, so I tried to make the form wider. Now I am experiencing more problems than before. Both "Mary's Way Salve" and "Infused Flower" are truncated, and some (not all) of the product descriptions are appearing very narrow, rather than stretching to the edge of the parameters.

    I have adjusted the code above to display up til 350px, but still showing truncation.

    Screenshots of the truncated options:

     

    Screenshot of the overly narrow description text:

     

    Thanks so much, you guys are so very helpful.

  • Profile Image
    JotForm Support

    Answered by Charlie on February 02, 2015 at 08:50 PM

    Hi,

    You're welcome. I've cloned your form and made edits on it. Could you check if this styling works for you: http://form.jotformpro.com/form/50327796198973. If it works for you, you can clone it.

    Here's the styling I added.

    .form-product-item img {

        height : 250px;

        width : 250px;

    }

    .form-product-item br + br {

        display : block;

    }

    .form-product-item {

        min-height: 250px !important;

        width: 100% !important;

    }

     

    This should automatically adjust the width of each product item to full.

    Do let us know if this works.

    Thank you.

  • Profile Image

    Answered by ericablair on February 02, 2015 at 08:54 PM

    That worked! Awesome. You guys have the BEST customer service--especially for people like me who don't really understand CSS, it's a godsend! Thank you thank you!

  • Profile Image
    JotForm Support

    Answered by Charlie on February 02, 2015 at 10:05 PM

    Thank you for your kind words and you're very much welcome. I'm glad that everything is working in your end as expected. I do agree that not everyone are familiar with CSS, and our developers and management are trying their best to innovate our form builder, that includes the Form Designer, which lets users design more the form using tools, although it still needs quite a time to learn and there are things where we really need to use CSS. But, we're always here to help you as much as possible, so please do feel free to contact us anytime.

    Thank you for your continued support in JotForm. :)