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 can I enlarge product images on purchase order?

    Asked by dclempa on May 09, 2013 at 04:28 PM

    I am going to making several more purchase order forms but I will need to enlarge the product images. Is there any

    way to do that? Like lighbox or just mouse over to enlarge the product image.

    The forms that I will be using is going to be like this form:   http://form.jotform.us/form/30987304352152

    Page URL:
    http://form.jotform.us/form/30987304352152

    purchase product JotForm order forms
  • Profile Image

    Answered by jefreylandicho on May 09, 2013 at 05:09 PM

    You can enlarge the product image by defining .form-product-item img width and height in your form styles Inject Custom CSS. 

    To Inject a custom CSS in your form styles, select Setup & Embed then click the Preferences Icon. In the preferences window, click form styles tab and add the CSS code below in the Inject Custom CSS textarea.

     

    .form-product-item img {

    width: 150px;   / * in bold, value can be change based on your size preferences */

    height: 150px;   / * in bold, value can be change based on your size preferences */

    }


    By adjusting the product image, you dropdown selection might change its alignment and you might need to add the CSS code below as well to fix the dropdown alignment.

    .form-sub-label-container:nth-child(20), .form-sub-label-container:nth-child(27),.form-product-item:nth-child(21) .form-sub-label-container,.form-product-item:nth-child(21) .form-sub-label-container:nth-child(12)

    margin-left: 0px !important;

    }

    If you need further assistance, please contact us again.

  • Profile Image

    Answered by dclempa on May 09, 2013 at 06:39 PM
    Jefrey
    I am going to create a test form so I can do this and not mess up the form now because everything is OK on form
    http://form.jotform.us/form/31070890432145. However I did do this temporarily on this form and is made it
    150 wide but the height stayed the same.
    What do I need to do in the future?

    Thanks Dennis


  • Profile Image

    Answered by jefreylandicho on May 09, 2013 at 06:50 PM

    I checked your form styles and did not find the CSS code shown below,

    .form-product-item img {

    width: 150px;   / * in bold, value can be change based on your size preferences */

    height: 150px;   / * in bold, value can be change based on your size preferences */

    }

    Also, please try adding !important on the width and height  as well e.g. height:150px !important

  • Profile Image

    Answered by dclempa on May 20, 2013 at 10:56 PM

    The script to enlarge the product image just makes it more wide and height stays the same.

    Here is the form:

     

    http://form.jotform.us/form/31307227831145

     

    Thanks Dennis

  • Profile Image

    Answered by dclempa on May 20, 2013 at 11:09 PM
    · Hello JotForm
    The script to enlarge the product image just makes it more wide and height stays the same.
    Here is the form:
    http://form.jotform.us/form/31307227831145

    Thanks Dennis


  • Profile Image

    Answered by dclempa on May 20, 2013 at 11:22 PM
    Sorry Jot Form!

    I got it to work but I need to line all the quantity boxes under the “A” label. You all gave me some script before and I have it
    it with this script but I may be adding to many scripts to get this done.

    Here is what I have now :
    .form-sub-label-container:nth-child(20), .form-sub-label-container:nth-child(27) {
    margin-left: 62px !important;
    }
    .form-product-item:nth-child(21) .form-sub-label-container:nth-child(12){
    margin-left: 62px !important;
    }
    .form-product-item:nth-child(21) .form-sub-label-container{
    width: 90px !important;
    }
    .form-product-item .form-sub-label-container {
    width: 78px;
    }
    .form-product-item img {
    width: 100px; height: 100px;
    }

    Thanks Dennis

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 21, 2013 at 02:53 AM

    Hi Dennis,

    Regarding on the image sizes, if you don't like to set height, simply removed height property from the code. So it should become like this. Anyway, I think you got that part already so nevermind, just wanted to let you know about this. :)

     

    .form-product-item img {

    width: 150px;

    }

    --------------------

    If your current form setup is now OK, just replace your current CSS code to fix the quantity alignment on your label "A" product.

     

    .form-sub-label-container:nth-child(24), .form-sub-label-container:nth-child(30) {

    margin-left: 112px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container:nth-child(12){

    margin-left: 62px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container{

    width: 90px !important;

    }

    .form-product-item .form-sub-label-container {

    width: 78px;

    }

    .form-product-item img {

    width: 100px; height: 100px;

    }

    Comparing this from your previous code, see the bolded numbers on the first line of this code. That's the way to fix it.

    Hope this helps. Thank you!

  • Profile Image

    Answered by dclempa on May 21, 2013 at 03:50 AM
    Dear JetForm
    Did I make a mistake by taking out the previous code? Help?
    Form http://form.jotform.us/form/31307227831145
    This is IE10 and FireFox
    IE10&Firefox.png

    This is Chrome
    Chrome.png


    This is IE 9
    IE9.png



  • Profile Image

    Answered by dclempa on May 21, 2013 at 04:06 AM
    Sorry again, I refreshed page and Form got worse! I used the code that you gave me below and removed all the previous
    code. Help again!

    Dennis



    This is IE 9
    IE9.png
    This is Chrome
    Chrome.png

    This is FireFox
    FireFox.png
  • Profile Image
    JotForm Support

    Answered by EltonCris on May 21, 2013 at 04:11 AM

    Hi Dennis,

    Sorry, I forgot to change 62px to 112px on the first line of the code. Use the following code instead:

    .form-sub-label-container:nth-child(24), .form-sub-label-container:nth-child(30) {

    margin-left: 112px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container:nth-child(12){

    margin-left: 62px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container{

    width: 90px !important;

    }

    .form-product-item .form-sub-label-container {

    width: 78px;

    }

    .form-product-item img {

    width: 100px; height: 100px;

    }

    Here's a cloned of your form: http://form.jotformpro.com/form/31402176239954?

    Thanks!

  • Profile Image

    Answered by dclempa on May 21, 2013 at 04:45 AM
    Thank you very much for your help!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Dennis

  • Profile Image

    Answered by dclempa on May 23, 2013 at 10:28 PM
    Hi JotForm

    My client now says the product images are two large. They were set to 100 as the code below indicates. I had to change them to 75 to
    satisfy my client. However the letters under the first Label “A” are out of alignment again. Can you show me what to change so that I
    do not have to bother you every time I make a new form. If I use 100px for the product images then everything is OK. I changed them to
    75px and you can see what happened. I have to make about 8 purchase orders and I will have to be changing the size on the others forms
    that I will be designing.

    Thanks for all of your help. Here is the form: http://form.jotform.us/form/31381893483159

    Dennis


  • Profile Image
    JotForm Support

    Answered by Welvin on May 24, 2013 at 12:19 AM

    Hi Dennis,

    Remove the current codes that are injected to the form and replace them to this one:

    .form-sub-label-container:nth-child(20), .form-sub-label-container:nth-child(27) {

    margin-left: 87px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container:nth-child(12){

    margin-left: 62px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container{

    width: 90px !important;

    }

    .form-product-item .form-sub-label-container {

    width: 78px;

    }

    .form-product-item img {

    width: 75px; height: 75px;

    }

    Basically, you will have to change only this line of codes:

    .form-sub-label-container:nth-child(24), .form-sub-label-container:nth-child(30) {

    margin-left: 112px !important;

    }

    to

    .form-sub-label-container:nth-child(20), .form-sub-label-container:nth-child(27) {

    margin-left: 87px !important;

    }

    Result:

    Thanks

  • Profile Image

    Answered by dclempa on May 24, 2013 at 01:12 AM
    Hi Welvin

    This code only works with Chrome. IE 9 and Firefox looks like the screen shot below. The “U” is out of line, way to the left. I know that the browsers are different but this client has IE 9 and this will not work for him. Here is the screen shot. It was working good in all three browsers with the code for
    the 100px images. Please Help!!
    http://form.jotform.us/form/31381893483159
    form.png
    Thanks Dennis!!





  • Profile Image
    JotForm Support

    Answered by Welvin on May 24, 2013 at 02:53 AM

    Hi Dennis,

    Let me get back to you once I found the solution.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 24, 2013 at 03:52 AM

    Hi Dennis,

    I have fixed your form your convenience. Kindly recheck it on different browsers now. I would also suggest to clear your browser's cache first.

    This time, I've found another workaround without using CSS3 browser hack. I have been experementing something and viola!, got the right code for it. It's short and concise, I guess :)

    Here's the codes used for your reference.

    #id_9 .form-product-image{padding-bottom:60px;}

    .form-product-item .form-sub-label-container {width: 78px;}

    .form-product-item img {width: 75px; height: 75px;}

    Do let us know if you have further changes. We'd always be happy to assist you at anytime.

    Best Regards!