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 iframe on mobile show the form correctly?

    Asked by novoform on July 19, 2016 at 02:07 AM

    Hi Jotform,

    I have had a new form developed. It shows fine when it's on mobile by it's own urlhttps://form.jotform.co/novoform/ready-to-migrant . The only small issue is that some options font shows differently (bigger than others) as the photo showing below:

    The main problem happens when I insert the form to one of our web page: 

    http://www.choosenewzealand.com/how-can-we-help/migrate-the-point-calculator/

    It is fine on desktop but not on mobile.

     

    Problems:

    1. The form on the page shows wider than the other part. 

    2. The font is different:

    3. It doesn't show the whole form:

     

     

     

     

     

     

     

     

     

     

    Can someone help me on this?

    Thanks!

     

    Frank

    Page URL:
    http://www.choosenewzealand.com/how-can-we-help/migrate-the-point-calc<br/>ulator/

  • Profile Image
    JotForm Support

    Answered by beril on July 19, 2016 at 03:51 AM

    Hello Frank,

    I've tested your form on my phone and I am able to reproduce the same issue that you’re having. I think, the main problem is that you're not able to see the submit button. To solve that issue, could you please re-embed your form as you see below:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.co/61219237224854" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="yes"> </iframe>

    To solve your other issues, could you also inject the CSS code below from designer?

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

     .form-input-wide.jf-required {

        font-size: 15px !important;

    }

    .form-textbox, .form-textarea {

    width: 250px !important;

    }

    }

     

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image

    Answered by novoform on July 19, 2016 at 10:18 PM

    Hi Beril,

    Thanks for your answer. The mobile version now shows the submit button. I've also put your code in the CSS through Jotform designer. But the font and width issue seems still there. The user experience looks not really good. Do you know if I did that right?

    Thanks!

    Frank

  • Profile Image
    JotForm Support

    Answered by jonathan on July 20, 2016 at 01:29 AM

    I test the form on your website using mobile browser, and so far I did not encounter issue with form. 

    The Textbox and TextArea were also showing responsive width.

    Can you please tell us more details on the steps to produce the problem. We will check further once we have a better undestanding of the issue.

    Thank you.

  • Profile Image

    Answered by novoform on July 20, 2016 at 07:11 PM

    Thanks Jonathan. It looks fine on your screen. But on my mobile the form is still wider than the default page width and I have to zoom out to see the whole form. See the photos below:

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on July 20, 2016 at 09:07 PM

    You website was not loading on the browser when I tried to test and check at this time.

    Can you please check if the website is ok. 

    The form https://form.jotform.co/novoform/ready-to-migrant is ok, but sinde we need to test the actual embedded form we need to be able to check it on the website.

    We will wait for your response.

     

     

     

     

  • Profile Image

    Answered by novoform on July 20, 2016 at 11:53 PM

    It works fine in my end. http://www.choosenewzealand.com/how-can-we-help/migrate-the-point-calculator/

    Do you mind to try it again?

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Welvin on July 21, 2016 at 12:49 AM

    I've added the following custom CSS codes to your form and it seems to have fixed the issue. Can you check and confirm?

    @media only screen and (max-device-width: 1024px) {

        .form-all {

            -webkit-box-sizing: border-box !important;

            -moz-box-sizing: border-box !important;

            box-sizing: border-box !important;

        }

    }

     

  • Profile Image

    Answered by novoform on July 24, 2016 at 10:56 PM

    Hi Weivin,

    Thanks! But on my mobile (iPhone 6, Chrome) it looks still as the last two screenshots I sent to you. Some of the font looks too big for the mobile screen.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by beril on July 25, 2016 at 03:45 AM

    Could you try to inject the CSS code below:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

     

        .form-radio-item label {

            font-size : 15px !important;

        }

     

        #cid_59 span.form-radio-item {

            font-size : 15px !important;

        }

     

        .div.form-radio-item hoverSticky label {

            font-size : 15px !important;

        }

     

        .div#label_input_60_2 , #label_input_60_0 , #label_input_60_1 {

            font-size : 15px !important;

        }

     

        .div#label_input_59_2 , #label_input_59_0 , #label_input_59_1 {

            font-size : 15px !important;

            font-family:'Helvetica' !important;

     

        }

     

        .form-all {

            font-size : 15px !important;

        }

     

        .form-radio-item:not(#foo) label:after {

            font-size : 15px !important;

        }

    }

     

     

    We would appreciate it if you could also test it on your side and let us know the result.