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

    Inject CSS in Purchase Form for Multiple Image Sizes w/ same Class Name

    Asked by ErikasCucina on September 26, 2013 at 01:04 AM

    In the form at http://form.jotform.us/form/32675573364159 I cannot change the third image used to represent the "Special Dishes and Appetizers" section to a custom 900Wx250H size. Instead it takes on the size of the second item above it when I use the Custom CSS inject.

     

    This is the inject code I'm using, but what I found is that in the source code multiple images (the 2nd and 3rd images) use the same class=form-product-image-with-options. I even tried to use the nth-child(2) logic but this did not work.

     

    Can you help me determine what custom CSS inject code is needed to make the 1st item 900x250, the 2nd image to 900x650 and the third image to 900x250? Please, I've been racking my brain all night but no solution.

    .form-product-image {

    width: 900px;

    height: 250px;

    }

    .form-product-image-with-options {

    width: 900px;

    height: 650px;

    }

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

    inject CSS name purchase JotForm size source height
  • Profile Image
    JotForm Support

    Answered by EltonCris on September 26, 2013 at 01:51 AM

    Use this for the 3rd image.

    .form-product-item:nth-child(8) .form-product-image-with-options {

    width: 900px;

    height: 650px;

    }

    If you need anything else, let us know. Thanks!

  • Profile Image

    Answered by ErikasCucina on September 26, 2013 at 02:17 AM

    Thanks Elton I knew you would come through! It worked but can you give me the way you calculated that? I will be adding more images and I want to know how to do it. How did you find that this is the 8th child? I know how to get into the source code I'm just weak on CSS and looking for a hint.....:}

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 26, 2013 at 03:17 AM

    @ErikasCucina

    Great!

    If you're using Google Chrome Browswer, here's some tips.

    Right click the image > Inspect Element then look on the codes below.

    Example:

    Parent element holds the entire product-item class so under it you have to count all the child elements. Please refer to the visual screen above. :)

    Thanks!

  • Profile Image

    Answered by ErikasCucina on September 26, 2013 at 02:59 PM

    One issue, when I make changes to items and such the images are all reverted to odd size. I think this is due to the nth child position change but do you have any way I can avoid this by using better CSS inject code?

  • Profile Image

    Answered by ErikasCucina on September 26, 2013 at 04:07 PM

    Also, I noticed on older versions of IE the images are not redrawn to size specified. Any fix for this?

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 26, 2013 at 09:00 PM

    Hello!

    I think that's the simpliest CSS as it's more neater and simple than the older method. It's very complicated like .form-product-item + .form-product-item + .form-product-item .... It'd be very long. :)

    Yes, sorry to missed that. nth-child isn't supported with IE8 and earlier. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

    Another simplier method is to modify your form source code if you're OK on embedding the code as source code. How to get your Form Source Code

    This way you can put specific styles on the image codes. Example:

    <img src="//www.jotform.com/uploads/ErikasCucina/form_files/ErikasCucina_ColdBuffet-900x250.png" class="form-product-image" height="900" width="250" align="absmiddle" />

    If you are embedding the codes on FB pages, I think source code would be possible. Let us know what you think.

    Thanks! :)

  • Profile Image

    Answered by ErikasCucina on September 27, 2013 at 10:20 AM

    I can write HTML, Classic ASP and other scripting. Are you saying that I can download the code, modify it and then use it stand-alone without JotForm's embedding tools and such. Are you suggesting to download and then host this code on my own servers which would give me more control to modify it accordingly?

  • Profile Image
    JotForm Support

    Answered by guilledutra on September 27, 2013 at 11:50 AM

    Hi,

    you are right, you can download your formś source code and  make custom modifications, then you can host it at your own server.

    Thanks