What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How would I make the images larger on order forms?

    Asked by pagewalker on May 27, 2016 at 01:43 PM

    Hi,

    How do I make my images larger on this order form?

    Perhaps the images could be to the side of the order fields.

    Thank you!!

    Page URL:
    https://form.jotform.com/60256183481152

    order forms order form side
  • Profile Image

    Answered by Ben on May 27, 2016 at 02:36 PM

    You could set the images by using a CSS such as this one:

    .form-product-image, .form-product-image-with-options {
        width: 150px;
    }

    You can of course change the 150 to any other number to match your preferred size.

    I would only recommend 2 things with images:

    1. add smaller ones. Adding images of over 1000px in width will only cause your form to load longer, especially if you are not showing the images in the same sizes

    2. find the size that works best for you and add all images in the same or similar size, so that you can use the CSS (like the one above) that would show them either in their original size or in the size lower than its original - if browsers need to resize your images down, the images look good, however if they resize them upwards, they could end up slightly blurred.

    What I mean is that if you will be showing your images in 150px width, I would recommend adding images with 200px width to your form. That way they will load faster and they would be nicely shown on your form.

    Do of course let us know if you have any questions or issues and to add the CSS to your form, simply follow the steps described here: Inject Custom CSS Codes