Compatibility with IOS

  • Profile Image
    EffieMcNair
    Asked on March 10, 2016 at 09: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! :-)

     

     

     

  • Profile Image
    mert
    Answered 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:

     

     

    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:

     

    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"

          onload="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.

  • Profile Image
    EffieMcNair
    Answered 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

     

  • Profile Image
    Chriistian
    Answered on March 11, 2016 at 01:47 AM

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

    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"

          onload="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.

     

  • Profile Image
    EffieMcNair
    Answered on March 11, 2016 at 02: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:

    https://form.jotform.co/60521600524846

     

    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

  • Profile Image
    Chriistian
    Answered on March 11, 2016 at 03:16 AM

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

    <iframe

          id="JotFormIFrame"

          onload="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.

  • Profile Image
    EffieMcNair
    Answered on March 11, 2016 at 06:10 AM

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

  • Profile Image
    Carina
    Answered on March 11, 2016 at 06:55 AM

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

     

    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.