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

  • Profile Image
    LittleHikerBird
    Asked on June 18, 2018 at 02: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! 

  • Profile Image
    Nik_C
    Answered on June 18, 2018 at 03: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:

    1529348477Screen Shot 2018-06-18 at 8.59

    Then you can hide checkboxes and 'Free' wording:

    1529348597Screen Shot 2018-06-18 at 9.02

    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:

    1529348879Screen Shot 2018-06-18 at 9.05

    Let us know if that helps.

    Thank you!

     
  • Profile Image
    LittleHikerBird
    Answered on June 19, 2018 at 08: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? 

    1529412725Screen Shot 2018-06-19 at 8.50

    Thank you, 


    Carol

  • Profile Image
    BDAVID
    Answered 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:

    1529420710result_001.png