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

    Images are not scaling in Responsive Form

    Asked by glandoreghyc on December 06, 2015 at 12:54 PM

    If you look at the page in the URL link provided you will see that on a desktop Display the form and the image at the bottom of the Form look OK.

     

    Now look at the form on a Smart Phone or tablet and the image has not scaled and looks out of proportion, in some cases the image increases in size.

     

    Is this fixable please?

     

    thx

     

    John

    Page URL:
    http://www.reenoserve.com/GHYC/forms/

    size URL link
  • Profile Image
    JotForm Support

    Answered by jonathan on December 06, 2015 at 01:50 PM

    Hi John,

    I was able to see the problem as well when I made a test using the form on your website.

    The secure image logo on the form blocked the Submit button of the form on the website.

    However, when I used the direct URL of the form http://www.jotformpro.com/form/53362537741962 the issue did not happen.

     

    I think the iframe embedded form on the website only lacks the height it needs to be able to fully display the embedded form.

    Can you please try first gathering again the iframe code of the form and re-embed? See if the new iframe code now fits.

    If it did not, you can manually increase the iframe height so that the whole form will be displayed.

    user guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

     

    Let us know if issue persist.

    Thanks. 

  • Profile Image

    Answered by glandoreghyc on December 06, 2015 at 05:40 PM

    Hello,

     

    Since i added the image, which was my png version with transparent background of your standard image, i have been having some strange intermittent display issues when viewing the form on smartphones/Tablets. so for the time being i have removed the image to make sure all is OK without it.

    And yes i have updated the iframe embedded code when i make the changes, so am puzzled by the strange behavior.

     

    thx

     

    John

  • Profile Image
    JotForm Support

    Answered by jonathan on December 06, 2015 at 07:00 PM

    Hi John,

    Thank you for updating us on the status.

    I checked again using your website, and I can see the embedded form now can be use properly.

    Please don't hesitate to contact us again anytime should you require assistance on JotForm

    Regards

  • Profile Image

    Answered by glandoreghyc on December 07, 2015 at 02:51 AM

    Yes but the issue still needs to be resolved, it appears the form"Breaks" when you add an image as i did.

    I believe Jotform should investigate.

     

    Thx

     

    John

  • Profile Image
    JotForm Support

    Answered by mert on December 07, 2015 at 03:29 AM

    Hi John,

    Actually, you can find a solution for this problem by injecting some custom CSS code to your form. With "@media" rule, you can make that image responsive for mobile platforms.

    Below, you will the CSS code that I prepared for your form. The following one adjust the image size with respect to the resolution. 

     

    @media screen and (min-width: 10px) and (max-width: 400px){

        #cid_24 img.form-image {

            width : 75px !important;

            height : 75px !important;

        }

    }

    r

    @media screen and (min-width: 401px) and (max-width: 600px){

        #cid_24 img.form-image {

            width : 150px !important;

            height : 150px !important;

        }

    }

     

    @media screen and (min-width: 601px) and (max-width: 2400px){

        #cid_24 img.form-image {

            width : 160px !important;

            height : 160px !important;

        }

    }

     

    Also, here is the result on 1334 x 750 display iPhone.

     

    Please, try this method and let us know the results. If you encounter any error or need extra information, always feel free to contact us.

     

    Thanks.

  • Profile Image

    Answered by glandoreghyc on December 07, 2015 at 03:46 AM

    Hello,

     

    Thank You, I have decided to use the images differently on the site so will not embed them in the forms. However your response is very helpful and i will keep the info as a reference.

     

    Thanks

     

    John

  • Profile Image
    JotForm Support

    Answered by mert on December 07, 2015 at 04:05 AM

    Hi again,

    You are most welcome. Please, keep that on your mind the code above can also used in any field to make it responsive. If you encounter this problem again with other fields, you can use this one as a template to make them responsive.

     

    Have a great day.