Can I make product images larger on the product order form template? + 2 other questions

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! 

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!

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

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: