Order Form not displaying images properly

  • Profile Image
    jntsou
    Asked on December 07, 2014 at 01:59 AM

    Hi,

     

    I set up the sales order form with photos but it is not showing it when I check out. It looks good when I edit the form. However, I can't even order from the from link

    http://form.jotform.us/form/43366030462145

  • Profile Image
    Ben
    Answered on December 07, 2014 at 04:36 AM

    Hi,

    I took a look at your jotform and I think that I see what you mean.

    To fix this just add this CSS code to your jotform:

    span.form-product-item {
        min-height: 200px;
        float: left;
    }
    #cid_3 {

        margin-top: 30px;
    }

    span.form-payment-total {
        clear: both;
        display: block;
    }

    This code will make it look like this:

    In case this is not what you mean, do let us know.

    Best Regards,
    Ben

  • Profile Image
    jntsou
    Answered on December 07, 2014 at 04:51 PM
    Awesome!
    Sent from Jean's iPhone
    ...
  • Profile Image
    jntsou
    Answered on December 07, 2014 at 08:51 PM
    How do I make the sales order form in the center? it is on the right side
    of the form now.
    Jean
    ...
  • Profile Image
    abajan
    Answered on December 08, 2014 at 04:39 AM

    Hi Jean,

    Could you please elaborate? I've had a look at your jotform and I don't see anything aligned to the right. In most instances screenshots help to explain issues. Please use the following procedure:

    METHOD 1 (EASIEST)

    1. Click on Insert/Edit image button

    2. Click on the "Upload" button

     

    3. Click on Choose File and look in your local folders.

    4. Click on Submit

     

     

    METHOD 2 

    This is VERY useful when you need to inject Custom CSS that requires image URL's. Please check the steps below:

    1. Go to: https://www.jotform.com/help/image_upload.php?naked=true

    2. Click "Choose File" button and choose your image file (should be in JPG or PNG format and not more than 500KB)

    3. Click "Send Image" to upload (you should be able to see the file successfully uploaded in the image section)

    4. Select and Copy the direct file URL from the "Image URL" box

    5. In our forum editor, click the "Insert/Edit Image" button:

    6. Paste link in the "Source" box:

    **Dimensions boxes are automatically filled by the editor and used the actual image width and height. You can change it if you wish.***

    That's it! :)


    Thanks