Question about sub products on order form

Hi-

I'm trying to figure out how to use the products and sub products. 

I did (I think) 2 sub products (one "Sweet apples" one "Tart apples") under the "Apples" product, but only the "Sweet apples" shows up on the preview.

What am I missing?

Thank you!

Hi @NStarOrchard!

I would like to apologize for the inconvenience you are experiencing.

I have gone ahead and made a clone of your form for testing purposes and have found that your product Apples has the sub-products Sweet Apples and Tart Apples and those have their own sub-products Stellar, Golden, etc. Unfortunately, it is not possible to have sub-products within sub-products which is why you are only able to see one of your Apple options.

My suggestion would be to make the Sweet Apples and Tart Apples separate products and add the sub-products to them individually. Feel free to clone my cloned form and use it as an example if you need: https://form.jotform.com/200445407669963

Also, if you need assistance in cloning my form you may use this helpful user guide to help you: How-to-Clone-an-Existing-Form-from-a-URL

Please let us know if you require any further assistance, we are always happy to help!

Ok, I'm working with all of this and am basically happy with how I'll be able to make it work.

https://form.jotform.com/200473977958169

However - when it is open for use (either on a computer or on mobile), the interface is a bit clunky. In the "Items Available to Order Now" only odd little amounts of each are shown (or not) until someone clicks the box for that item.

Is there any way to make that look not so messy or amateurish?

Perhaps that simply each one can "show" and when checked it drops down at that point? As it is, they all work that way, but various ones show a bit of this or that (or not, depending on the screen I'm looking at), which not only looks icky but could be confusing for customers.

Thanks for any suggestions!

It is a default setting to keep sub products hidden until the product is selected. Please try to add the next code to your form to display sub products constantly:

#cid_41 > div > div:nth-child(4) > span:nth-child(1) > div{

height:200px!important;  

}

#cid_41 > div > div:nth-child(4) > span:nth-child(3) > div{

height:200px!important;  

}

#cid_41 > div > div:nth-child(4) > span:nth-child(5) > div{

height:200px!important;  

}

/*for Mobile View*/

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

#cid_41 > div > div:nth-child(4) > span:nth-child(1) > div{

height:300px!important;  

}

#cid_41 > div > div:nth-child(4) > span:nth-child(3) > div{

height:300px!important;  

}

#cid_41 > div > div:nth-child(4) > span:nth-child(5) > div{

height:300px!important;  

}

}

Related guide: How-to-Inject-Custom-CSS-Codes

Perfect....thanks so much for the excellent help!!

Actually, sorry - it's still not working right, despite plugging in the code. 

Could you please look at my form: https://form.jotform.com/200473977958169

("Share Plus Order Form") and see what I mean? What tweak to the CSS needs to be made?

Thank you!!

Greetings and thank you for your reply.

Can you please try to add the following CSS code right above my colleagues' code:

.form-product-item.hover-product-item:nth-child(1) {

  height: 350px !important;

}

If you think there is too much or too little space between the Item subtotal and the next field, you can adjust the 350 accordingly. 

Please let us know if you need any further assistance.