Compatibility with IOS

  • EffieMcNair
    Asked on March 10, 2016 at 9:36 AM

    Just wondering if somebody can help me and check my form on iOS mobile?

    I suspect its not working but don't have one to check! (we advertise with Google adwords and all the 'dead' clicks are from iOS....

     

    Link of my website/form attached - please make sure also to check the NEXT button as it takes you to another form....

     

    Thank you! :-)

     

     

     

  • mert JotForm UI Developer
    Replied on March 10, 2016 at 10:19 AM

    I checked your form on iPhone 6s and didn't see any problem on Landscape mode. Also, the "Next" button is redirecting user to the Form 2. However, width has a problem on Portrait mode.

    Please see it from the below:

    Compatibility with IOS Image 1 Screenshot 30 

     

    In this situation, I suggest you to use only one "Mobile Responsive" at the same time and disabling the one on the "Designer" is better. Please, check it from the below:

    Compatibility with IOS Image 2 Screenshot 41

     

    In addition, while you are embedding your form with the iFrame embed code, you don't need to take the whole structure of embed code, the content between <iframe>...</iframe> tags is enough to embed your form. (Following code is just an example, don't embed that one.)

     

        <iframe

          id="JotFormIFrame"

          onDISABLEDload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/53341292355958"

          frameborder="0"

          style="width:100%;

          height:800px;

          border:none;"

          scrolling="no">

        </iframe>

     

    Please, try this method and let us know the results.

    Thanks.

  • EffieMcNair
    Replied on March 11, 2016 at 12:07 AM

    Thanks. I've now removed the GeoComplete all together as its not a mobile friendly and cause me too many problems. I also did what you suggested regarding disabling the 'responsive' bit in the designer. 

    Could you please check it for me once more?

    Also if the second form after the 'NEXT' button been cut...

     

    Thanks!

    Effie

     

  • Chriistian Jotform Support
    Replied on March 11, 2016 at 1:47 AM

    I checked your form on iPhone 6s and I can see that the Next button is still visible.

    Compatibility with IOS Image 1 Screenshot 20

    I would suggest you reduce the width of the iFrame so that the right side is more visible. You can try using the iFrame embed code below where I set the width of the form as 241px.

         <iframe

          id="JotFormIFrame"

          onDISABLEDload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/53341292355958"

          frameborder="0"

          style="width:241px;

          height:800px;

          border:none;"

          scrolling="no">

        </iframe>

    Do let us know how it goes.
    Regards.

     

  • EffieMcNair
    Replied on March 11, 2016 at 2:22 AM

    Thanks Chriistia,

    I'm not sure where the code that you wrote came from...(I guess you copy it from the answer that your colleague gave me) but this is NOT the form that embedded in my website.

    Please note - this is my form:

     

     

    and this is where its embedded:

    http://transaustremovals.com.au/quote-request/

     

    Now...if you can please re-post your suggestion that would be great :-)

     

    Effie

  • Chriistian Jotform Support
    Replied on March 11, 2016 at 3:16 AM

    Apologies for the mix-up. Here's the updated iFrame embed code with the correct url of your form.

    <iframe

          id="JotFormIFrame"

          onDISABLEDload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/60521600524846"

          frameborder="0"

          style="width:241px;

          height:1093px;

          border:none;"

          scrolling="no">

      </iframe>

    Do let us know if you need further assistance.
    Regards.

  • EffieMcNair
    Replied on March 11, 2016 at 6:10 AM

    Thanks, but I've tried...and it has created a very long & narrow form...no good

  • Carina
    Replied on March 11, 2016 at 6:55 AM

    I could replicate the same situation regarding the form dimensions when adding a new width:

    Compatibility with IOS Image 1 Screenshot 20

     

    Please try adding the following css code:

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

    iframe {

    width: 250px;

    height: 1100px;}

    }

    This will adjust form's width when the screen's width is less than 400px.

    Let us know if we can assist you further.