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

    Paypal Order form: Adjusting the size of product photo thumbnail; Checkbox: Adjusting the size of this the image

    Asked by KerryKistler on April 27, 2013 at 10:10 AM

    Is there a way to make the product thumbnail larger (and correct proportions) in the PayPal Pro Order area? I cannot find a way to adjust the size of the product thumbnail. See below. This form is still in testing phase and thus no url.

    Thanks, Kerry

    order form size product JotForm uploads jpg
  • Profile Image

    Answered by KerryKistler on April 27, 2013 at 09:18 PM

    All good now. I discovered the "Inject CSS Code" option on the forum and it works very nicely.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Welvin on April 28, 2013 at 12:43 AM

    Hi,

    You are welcome. Glad that you've found it. Let us know if you need any assistance again. 

     

    Thanks

  • Profile Image

    Answered by KerryKistler on April 29, 2013 at 11:20 AM

    Hi,

    A new problem has emerged with the thumbnails. They looked fine until I added a Custom Property box below each product (to provide a list of bonus material for the purchaser to view).

    Scroll down the form and you will see that any thumbnail BELOW a Custom Property box will return to the default size thus ignoring my injected CSS code.

    http://form.jotform.us/form/31173214387148

    I would have just inserted these bonus lists in a text box beneath each product description, but that feature does not seem to exist.

    Can you help please? Thanks,

    Kerry

  • Profile Image
    JotForm Support

    Answered by Welvin on April 29, 2013 at 01:12 PM

    Hi Kerry,

    The field class is different when you add custom property boxes. To fixed that, inject this codes to your form;

     

    .form-product-image-with-options {

    width: 85px !important;

    height: 110px !important;

    }

    Same Guide: How to Inject Custom CSS Codes

     

    Result:

    Thanks

  • Profile Image

    Answered by KerryKistler on April 29, 2013 at 08:38 PM

    Adding this new code worked like a charm. Thanks!!

    One other question. Is there another piece of magic code that will move the custom property boxes from UNDER the product photos to the RIGHT of the photos - in order to fill up some of the empty white space on the form rather than just making the form longer?

    Your expertise is welcomed,

    Kerry

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 29, 2013 at 11:48 PM

    Hi Kerry,

    This will reposition the two dropdown quantities. Just add the following codes to your existing injected css codes.

    #input_10_custom_1001_0, #input_10_custom_1002_0 {

    position: relative;

    top: -90px;

    left: 95px;

    }

     

    label[for="input_10_custom_1001_0"], label[for="input_10_custom_1002_0"]{

    position: relative;

    top: -65px;

    left: -312px;

    }

    If you want further changes, let us know. Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 29, 2013 at 11:55 PM

    I'm sorry, use the following code instead. Just replace my previous codes. There seems to be a gap issues on my first code

    #input_10_custom_1001_0, #input_10_custom_1002_0 {

    position: absolute;

    }

    label[for="input_10_custom_1001_0"], label[for="input_10_custom_1002_0"] {

    position: absolute;

    top: 65px;

    }

    Thanks!

  • Profile Image

    Answered by KerryKistler on May 01, 2013 at 06:34 AM

    Perfect code. Thanks again. Your service is crazy speedy!

    Kerry

  • Profile Image
    JotForm Support

    Answered by abajan on May 01, 2013 at 07:49 AM

    Ha ha

    Thanks Kerry :)

  • Profile Image

    Answered by KerryKistler on May 01, 2013 at 01:31 PM

    OK. Almost there.

    Note that the custom property boxes work in every place but these:

    - Back Issue #1

    - Back Issue #2

    - Canada Shipping

    - International Shipping.

    I have tried everything including making the form much wider.

    Any ideas?

    Kerry

  • Profile Image

    Answered by KerryKistler on May 01, 2013 at 01:32 PM

    Oh, sorry - here's the url:

     

    http://form.jotform.us/form/31173214387148

  • Profile Image
    JotForm Support

    Answered by jonathan on May 01, 2013 at 07:58 PM

    Hi Kerry,

    The following items are not conforming with the CSS codes anymore because it have different id#.

     

    those item's id# should be added to the CSS code provided by my colleague, and should be given a different top position value since it is not similar to the other existing item.

    We will try to create this for you. My colleague who knows better on the CSS will get back to you once he is back online again.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on May 02, 2013 at 04:45 AM

    Hi Kerry

    Please replace your current injected CSS with the following and save the form:

    .form-product-image-with-options {
    width: 85px;
    height: 110px;
    }

    .form-product-image {
    width: 85px;
    height: 110px;
    }

    .form-product-item:nth-child(21),
    .form-product-item:nth-child(23) {
    width: 600px;
    }

    .form-submit-print {
    width: 130px;
    padding: 8px 4px 8px 15px;
    }


    Should you need further assistance, we'd be glad to help.

  • Profile Image
    JotForm Support

    Answered by abajan on May 02, 2013 at 04:52 AM

    You could actually shorten the CSS to just

    .form-product-image-with-options,
    .form-product-image {
    width: 85px;
    height: 110px;
    }

    .form-product-item:nth-child(21),
    .form-product-item:nth-child(23) {
    width: 600px;
    }

    .form-submit-print {
    width: 130px;
    padding: 8px 4px 8px 15px;
    }

    because the declarations of the first two rules are identical.

  • Profile Image

    Answered by KerryKistler on May 02, 2013 at 05:16 AM

    Thanks again for a perfect solution. CSS is a mystery to me so I couldn't have fixed this on my own.

    Your customer service ROCKS.

     

    One last thing...the little check boxes that people click to select a product - is there a simple way to make those a a bit larger for visibility sake?

  • Profile Image

    Answered by moonzkie on May 02, 2013 at 07:27 AM

    Hi,

    Unfortunately, as for the checkboxes, it is not possible to resize it. However, I will try to forward this to our developers and hopefully, our developers can integrate this in the future.

    Thank you.

  • Profile Image

    Answered by KerryKistler on May 02, 2013 at 09:13 PM

    The button issue is a minor thing. I would rather have your team work on bigger issues like developing a field for entering a Discount code - like 10% off an entire order, etc.

    For some reason, there is still one field that is refusing to stick. The form was perfect last night but when I opened it this morning, the custom property box "Canadian Shipping", was all wonky again, alignment-wise. This happened AFTER the form was saved. How did it revert after it was saved? What will keep it from happening again?

    Please help!

    http://form.jotform.us/form/31173214387148

  • Profile Image
    JotForm Support

    Answered by abajan on May 03, 2013 at 05:05 AM

    Hi again Kerry

    Injecting the following CSS should fix the problem:

    .form-product-image-with-options,
    .form-product-image {
    width: 85px;
    height: 110px;
    }

    .form-product-item:nth-child(27),
    .form-product-item:nth-child(29) {
    width: 620px;
    }

    .form-submit-print {
    width: 130px;
    padding: 8px 4px 8px 15px;
    }

    The second rule needed updating a bit due to changes that were made to the form. The form for which I supplied the previous CSS looked different to this latest one. For the sake of comparison, here's my clone of the older one.

    I don't know how your form could have reverted to its old appearance after it was saved. What I can tell you is that often, changes to injected CSS make a form appear one way in the form builder and another at the form's URL. Due to the nature of the second rule, once products are added or removed before the stamps, the positioning of the shipping rate elements (the dropdowns and their labels) will revert to the old location: under the images. The numbers in parentheses of the second rule's selector target the "boxes" (for want of a better term) which contain the said elements. For details on how the :nth-child() selector works, please see the following video:


    As always, if you need further assistance, we'd be happy to help.

  • Profile Image
    JotForm Support

    Answered by abajan on May 03, 2013 at 05:33 AM

    Kerry,

    While viewing the video, I realized that it would be better to use :nth-last-of-type() in the second rule's selector, as follows:

    .form-product-item:nth-last-of-type(3),
    .form-product-item:nth-last-of-type(2) {
    width: 620px;
    }

    Since :nth-last-of-type counts from the last up instead of from the first down, inserting and deleting products above the stamps would not negatively affect the layout of the aforementioned dropdowns and their labels. (Incidentally, although :nth-child() and :nth-last-of-type() don't normally work in IE8, they do in this instance. I think it's something in the form script that compensates for that.)

  • Profile Image

    Answered by KerryKistler on May 05, 2013 at 05:17 AM

    OK, well, this last code has been working fine for  a couple of days then tonight I was updating postage amounts in the Canadian Shipping field, and now both it and the International shipping have reverted back to improper alignment. I did try to increase the width of the form just in case but no luck.

    Thanks again for the tech help. It is such a relief.

  • Profile Image
    JotForm Support

    Answered by abajan on May 05, 2013 at 05:52 AM

    Hi Kerry,

    Please replace your injected CSS with the following:

    .form-product-image-with-options,
    .form-product-image {
    width: 87px;
    height: 117px;
    }

    .form-product-item:nth-last-of-type(3),
    .form-product-item:nth-last-of-type(2) {
    width: 700px;
    }

    .form-product-item:nth-last-of-type(14) {
    width: 750px;
    }

    .form-submit-print {
    width: 130px;
    padding: 8px 4px 8px 15px;
    }

    .form-product-details {
    font-style: normal;
    font-weight: lighter !important;
    color: red;
    }

    The third rule is necessary to fix the display of the following product in Chrome:



    Also, there was an extra semicolon in the last rule which might have caused problems in some browsers.


    Cheers

  • Profile Image

    Answered by KerryKistler on May 05, 2013 at 06:15 AM

    Seems to be working OK now. Thanks for the fix! Best, Kerry

  • Profile Image

    Answered by pinoytech on May 05, 2013 at 08:38 AM

    Hi Kerry,

    On behalf of my colleagues, you are quite welcome. If you need our assistance again, feel free to contact us again at anytime.

    Have a great day!