-
LittleHikerBirdAsked on June 18, 2018 at 2:07 PM
Hi!
I used the Product Order Form template to create a wholesale order form for my customers. I'd love to make three adjustments, to make it run smoother for my customers and I.
1. I uploaded product images in the form builder, but the images don't show up when a customer submits the form to me. The order PDFs I download only have the product names and modifier information. Can I include the photos in my submission pdfs somehow?
2. Can I make the product images on my order form slightly larger?
3. Can I create product categories, so there are headers in-between different types of products. Instead of one long list.
Thank you!
Thank you!
-
Nik_CReplied on June 18, 2018 at 3:14 PM
1) Unfortunately, product image will not show in submissions/notifier, it will only show for the user on form preview.
2) You can insert the below CSS to your Custom CSS Field:
img.form-product-image-with-options {
width: 70px!important;
}
That will increase your product's image size. You can adjust the size by changing the width number.
3) Regarding this, there is a workaround you can do, you could insert two additional products:
Then you can hide checkboxes and 'Free' wording:
By using a CSS that looks like this:
input#input_16_1003 {
display: none;
}
span#input_16_1003_price {
display: none;
}
But please be mindful that the above CSS might be different in your form, so we can surely help you with that, it should look like this:
Let us know if that helps.
Thank you!
-
LittleHikerBirdReplied on June 19, 2018 at 8:52 AM
Hi Nic!
This all super helpful, thank you!
I have one question for you. When I enter the code to make the images larger, the product information drops down on its own line, leaving the image above it. Is there a way to keep everything on the same line again?
Thank you,
Carol
-
David JotForm Support ManagerReplied on June 19, 2018 at 11:05 AM
Please inject the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
.form-product-item-detail{
width: 50% !important;
}
Result: