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 test bulk image changes without changing field source URLs?

    Asked by bdoodle on November 13, 2016 at 01:44 PM

    Given: I have a form with 420 png images (depicting 42 spinnaker sail panels in 10 different colors) in the same absolute position.  I have a sail outline with numbered panels in the same absolute position as well.

               Outline of whole spinnaker                                            Panel 1b in aqua (1 of 420 panel images)

     

    Each panel color image is shown conditionally based on the selection taken in 42 dropdowns, one corresponding to each spinnaker panel.  The image fields “source” the png images with a URL to my website host and its images subdirectory. E.g. http://www.madsails.com/images/FS_Spin_1a_Red.png

    Objective: I want to increase the size of my images by 50% thereby increasing the whole spinnaker sail image size by 50%. 

     

    Problem: I can take all 420 panel images and increase the size of each by 150%, but how can I test my work?  I don’t want to change the 420 img fields’ source URLs to point to a test images directory and then have to change 420 URLs back when I’m ready to install.  I can’t change the image png files on my host until I’m ready to go into production with all the new images, and I’d like to test before doing so.

    Any suggestions? Is there some way to cause the existing img field URL's to get me to a test directory in my local windows 10 environment or at my web host during testing?

    My test form: (still shows small spin image)

    http://www.madsails.com/Specify_FS_TR_spinTest.html

     

    My live form: 

    http://www.madsails.com/Specify_FS_TR_spin.html

     

    Page URL:
    http://www.madsails.com/Specify_FS_TR_spinTest.html

    image size
  • Profile Image
    JotForm Support

    Answered by Mike on November 13, 2016 at 04:07 PM

    Have you tried increasing the image sizes with CSS?

    You may try something like this to see if this is compatible with your setup:

    img {
    width: 150%;
    height: 150%;
    }

  • Profile Image

    Answered by bdoodle on November 14, 2016 at 12:32 PM

    Thanks for the suggestion.  You have saved me a ton of work. So, instead of changing 420 images to be bigger, I can just add the CSS above to increase the size of these images.  That works well given the nature of most of the images on my form.  They each are just one color in a triangular shape.  However, I have a few images that I'd like to recreate myself larger and show them at 100% so they are sharp.  How do I override the above CSS for a specific image?  (e.g. that in #id_204, #id_591, #id_593)

    Also, when I add the above CSS, I get a weird blue image at the bottom of my form when editting that I didn't define and that doesn't appear on the form when it's shown on my web page.  It doesn't hurt me, but I'd like to get rid of it if possible.

    my form is:

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

    Page URL:
    http://www.madsails.com/Specify_FS_TR_spinTest.html 

     

     

     

  • Profile Image
    JotForm Support

    Answered by Kiran on November 14, 2016 at 01:20 PM

    I understand that you want to apply the CSS code to all the img tags except for the specific images. Since you have the field IDs of the images, you may apply the CSS code as shown below:

    img:not(#id_204):not(#id_591):not(#id_593) {

    width: 150%;

    height: 150%;

    }

    I am not able to find any blue image at the bottom of the form at the moment. Were you able to fix the issue? If I am missing something, please provide us with the screenshot of the issue. 

    Let us know if you need any further assistance. We will be happy to assist.  

  • Profile Image

    Answered by bdoodle on November 14, 2016 at 02:12 PM

    Thanks for the CSS code to override the img specification.

    A screenshot of the mysterious blue image at the bottom of the form during editing appears below.

  • Profile Image
    JotForm Support

    Answered by Mike on November 14, 2016 at 02:45 PM

    Please try adding the next CSS:

    #stage img {
    width: inherit;
    height: inherit;
    }

    The size of the info icon should be fixed with that CSS.

    Thank you.

  • Profile Image

    Answered by bdoodle on November 14, 2016 at 03:45 PM

    I tried the :not with just one of the 3 fields where I didn't want the size multiplied by 150%, but it didn't work.  I updated the img field 591 to use a larger image file and then added the CSS :not for that field.

    I also tried your CSS code to address the info icon, but it didn't work either.  The CSS I added appears below:

    img:not(#id_591) {

    width: 150%;

    height: 150%;

    }

    #stage img {

    width: inherit;

    height: inherit;

    }

    I'm doing this in a clone of the form mentioned earlier.  My cloned form is:

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

    I don't not yet have it published. 

  • Profile Image
    JotForm Support

    Answered by Mike on November 14, 2016 at 05:54 PM

    Does the following CSS make any difference?

    img {
    width: 150%;
    height: 150%;
    }
    #id_591 img {
    width: 100%;
    height: 100%;
    }
    #stage img {
    width: inherit;
    height: inherit;
    }

  • Profile Image

    Answered by bdoodle on November 15, 2016 at 11:11 AM

    Thanks.  Your CSS code works.  

    However, I have the same problem with error icons for my 3 required fields that I did with the info icon earlier.  Please let me know the proper CSS code to have these icons inherit their width and height.

    Thanks very much!

  • Profile Image
    JotForm Support

    Answered by John_Benson on November 15, 2016 at 12:34 PM

    Hello,

    I am currently checking this issue. Please allow me some time to further investigate. I will get back to you as soon as I found a solution.

    Regards!

  • Profile Image

    Answered by bdoodle on November 15, 2016 at 02:09 PM

    Hello,

      I figured it out myself.  I added the following CSS code and everything worked:

    .form-error-message img {
    width: inherit;
    height: inherit;
    }

    I'm all set now.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by John_Benson on November 15, 2016 at 03:08 PM

    Thank you for waiting and updating us. We're glad you manage to fix the issue.

    I actually got the same thing. However, I am targeting the "hidden-field-warning" and not the "form-error-message" selector since it is not an error. Here's the CSS code:

    .hidden-field-warning img { 

    width: inherit;

    height: inherit;

    Hope that helps. Let us know if you need further assistance. 

  • Profile Image

    Answered by bdoodle on November 15, 2016 at 04:01 PM

    I used the form-error-message because the icon imgs only show when there is indeed an error.  Please let me know if I need to include your CSS as well. 

    Thanks.

  • Profile Image
    JotForm Support

    Answered by John_Benson on November 15, 2016 at 04:56 PM

    The CSS code I provided is a fix for the issue where there is a large image in the Form Builder. It is actually the "information" image icon.

    If you are still having this issue in the Form Builder, then I would recommend you inserting the CSS code I provided.

    Thank you.