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

    Photos don't line up with products when I add

    Asked by SportsInActionPhotos on November 11, 2016 at 04:23 PM

    in products listings with a photo- they don't line up because i added an "empty" free one to act as a header.  Can you fix the code so that its possible to make each photo line up.

    ie:  the last three don't have photo - cuz i added three sublistings.

    my form: 
    https://www.jotform.com//?formID=63154847172156#design

     

    LOVE THIS capability

    can you let me know what you do to fix it - i will be making a form for each of my customers!!

    So will be repeating...

    thanks, deb

    oops, i think i meant to say headers - therefore making the products the subcategories.

    Page URL:
    https://www.jotform.com//?formID=63154847172156#design

    products
  • Profile Image

    Answered by SportsInActionPhotos on November 11, 2016 at 05:29 PM

    I may have answered myself- if you take a product and turn it into a "heading" by making it free and applying that code - you have to add a photo to it - in order for the all the photos to line up with their perspective products.  anyway..  is there a work around--  i quess i could add a logo or line as a photo.. mmm sounds good to me

  • Profile Image
    JotForm Support

    Answered by jonathan on November 11, 2016 at 08:32 PM

    Thank you for updating us on the status. I checked your form https://www.jotform.us/form/63154847172156 and I see it looks great already. 

     

    Feel free to contact us anytime should you need assistance.

    Cheers

  • Profile Image

    Answered by SportsInActionPhotos on November 11, 2016 at 10:09 PM

    thanks,  
    but i have to make a photo for the "headers" like JOSEPH's PHOTO PKGS-because when u try to open the photos connected with products at the bottom set- it opens blank..
    so i'll work around with finding/making a small thumbnail for the "header" products 

    your page:

    https://www.jotform.com/help/178-How-to-Have-Sub-Category-or-Sub-Labels-on-an-Order-Form

    didn't mention the part about photos not lining up.

    I am so psyched with this capability though!  So cool. Thanks!

     

     

  • Profile Image
    JotForm Support

    Answered by Boris on November 12, 2016 at 05:25 AM

    We're glad to hear that you like this, and there is a way to move the labels themselves even when there is no product image. We can do this by using a bit of custom CSS, such as this one:

    label.form-product-container:nth-child(2) { margin-left: 62px; }

    This code would move all the product that do not have an image, so they would line up with those that do have a product image:

    You can add the above provided line of CSS by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please let us know should you need any further assistance.

  • Profile Image

    Answered by SportsInActionPhotos on November 12, 2016 at 08:20 AM

    here's what i meant by lining up...in perfect world... hah lol

    photo a - product a

    photo b - product b

    photo c - product c

     

    if you make 1st one a header with no photo then

    header  - product a (no photo)

    photo c - product b

    photo d - product c

    blank    - product d

    (mind you, the thumbnails will be there, hah, laughing at you {looking perfect}- till u click it! And, sure, how would you guys know- which product goes with which photo.)

    i prefer no photo for the "headers"  but will come up with something like graphic letters of the first names to make the page look not so full. and more elegant, lol.

    ps i was wondering what part of code could even make all the photos shift up one product- that was cool. Not!  funny, though.   I didn't think that could happen.

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on November 12, 2016 at 01:57 PM

    If I'm understanding your concern correctly, then, I believe,below is what you would like to happen to your form.

    I have added the CSS codes below to the form shown in the image above to make it look like that.

    span.form-product-item.hover-product-item:nth-child(6), span.form-product-item.hover-product-item:nth-child(8), span.form-product-item.hover-product-item:nth-child(10), span.form-product-item.hover-product-item:nth-child(16), span.form-product-item.hover-product-item:nth-child(18), span.form-product-item.hover-product-item:nth-child(22),span.form-product-item.hover-product-item:nth-child(24), span.form-product-item.hover-product-item:nth-child(26) {

        padding-top: 28px !important;

    }

    span.form-product-item.hover-product-item:nth-child(6) img.form-product-image, span.form-product-item.hover-product-item:nth-child(8) img.form-product-image, span.form-product-item.hover-product-item:nth-child(10) img.form-product-image, span.form-product-item.hover-product-item:nth-child(18) img.form-product-image, span.form-product-item.hover-product-item:nth-child(22) img.form-product-image, span.form-product-item.hover-product-item:nth-child(24) img.form-product-image {

        position: relative !important;

        top: -22px !important;

    }

    span.form-product-item.hover-product-item:nth-child(12) {

        padding-top: 68px !important;

    }

    span.form-product-item.hover-product-item:nth-child(12) img.form-product-image {

        position: relative;

        top: -62px;

    }

    span.form-product-item.hover-product-item:nth-child(16) img.form-product-image, span.form-product-item.hover-product-item:nth-child(26) img.form-product-image {

        position: relative;

        top: -20px;

    }

    label[for*="1010"], label[for*="1011"], label[for*="1012"]{

        top: 31px !important;

        position: relative;

    }

    I hope this helps. If, in any case, I have misunderstood your concern, please feel free to contact us anytime.

    Thank you.

  • Profile Image

    Answered by SportsInActionPhotos on November 13, 2016 at 09:29 AM

    https://www.jotform.com//?formID=63173760584158

     

     

    now look at thumbnails of last three products- and OPEN them.

    All photos have moved up to the product above if:

    if you make 1st one a header with no photo then

    header  - product a (no photo)

    photo c - product b

    photo d - product c

    blank    - product d

    (mind you, the thumbnails will be there, hah, laughing at you {looking perfect}- till u click it! And, sure, how would you guys know- which product goes with which photo.)

    i prefer no photo for the "headers"  but will come up with something like graphic letters of the first names to make the page look not so full. and more elegant, lol.

    ps i was wondering what part of code could even make all the photos shift up one product- that was cool. Not!  funny, though.   I didn't think that could happen.

     

  • Profile Image

    Answered by SportsInActionPhotos on November 13, 2016 at 09:38 AM

    what i mean by "lined up"

    should be

    Photo 1 with Product 1

    Photo 2 with Product 2

    Photo 3 with Product 3

     

        but if you make Product 1 a header row then: (with NO PHOTO)

    Product 1

    Photo 3 with Product 2

    Blank with Product 3

     

     

    and in the case above i have 3 headers so the last three photo THUMBNAILS don't open- and the photos that DO OPEN are NOT the right photo with the right product.

    the clone example in above post at 9:29 november 13 (today)

     

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 13, 2016 at 03:16 PM

    A workaround this would be uploading an image for the items you are using as headers:

    And then hiding these images by injecting the following custom CSS: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    span.form-product-item:nth-of-type(1) img{

    display: none !important;

    }

    span.form-product-item:nth-of-type(6) img{

    display: none !important;

    }

    span.form-product-item:nth-of-type(9) img{

    display: none !important;

    }

    Result: https://www.jotformpro.com/form/63175100020941? 

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image

    Answered by SportsInActionPhotos on November 14, 2016 at 05:21 PM

    yes!! thank you!  Right on.  
    Can I use this form and can you apply CSS to make the thumbnails appear taller, please.


    And will i be able to make this form customized for each of my customers with the same code- as long as i keep track of which product numbers are header rows.

    thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on November 14, 2016 at 07:07 PM

    Can I use this form and can you apply CSS to make the thumbnails appear taller, 

    You can clone BDAVID's form https://www.jotformpro.com/form/63175100020941? if you like.

    User guide: How-to-Clone-an-Existing-Form-from-a-URL

     

    And will i be able to make this form customized for each of my customers with the same code- as long as i keep track of which product numbers are header rows.

    If your other forms were a cloned version of the original for, the CSS codes maybe applicable. But if its not, you need to check the field ID# so that it can be applied.

    If you have other question please create a separate thread for it. You can use this link https://www.jotform.com/contact/

    Thanks.

     

  • Profile Image

    Answered by SportsInActionPhotos on November 14, 2016 at 07:37 PM

    Awesome, thanks!!

    I am a new customer!

  • Profile Image
    JotForm Support

    Answered by jonathan on November 14, 2016 at 08:45 PM

    You're quite welcome. We're glad to be of help. :-)

    Contact us anytime for any assistance you need on JotForm.

    Cheers