Customer with iPhone cannot see submit button

  • Profile Image
    Gillian
    Asked on April 10, 2019 at 05:36 PM

    I cannot send a screenshot because I do not have an iPhone and cannot replicate this issue.


    All iPhone customers are reporting this problem.

  • Profile Image
    denis_calin
    Answered on April 10, 2019 at 07:40 PM

    Hi Gillian!

    I was also able to replicate the problem on the iPhone. I can see that you are using the iFrame embed method for embedding the form on your website, and the Submit button is cut off from view. To solve this issue, please try embedding the following code:

    <iframe id="JotFormIFrame-21847127791157" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/21847127791157" frameborder="0" style="width: 1px; min-width: 100%; height:757px; border:none;" scrolling="no" > </iframe>  

    Try it with this height of 757px. Right now the iFrame on your webpage is embedded with height set to 1300px, that is why the Submit button is not displaying on iPhones. You can adjust it to see which one works best.

    1554939540Screen Shot 2019-04-10 at 4.24

    Please let me know if you have any other questions. Thank you and have a great day!

  • Profile Image
    gilrucker
    Answered on April 11, 2019 at 02:43 PM
    I replaced the code that you gave me and set the height to 757px, but then could not even see the submit button on my PC. I had to set it to 784 to see the submit button again. Can you check it on the iPhone again to see if anything good happened?

    ...
  • Profile Image
    denis_calin
    Answered on April 11, 2019 at 03:31 PM

    Hi @gilrucker!

    I just checked it on the iPhone and the Submit button is still not visible. Can you please replace the height value in the embed code to height: 1500px; Like so:

    <iframe id="JotFormIFrame-21847127791157" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/21847127791157" frameborder="0" style="width: 1px; min-width: 100%; height:1500px; border:none;" scrolling="no" > </iframe>

    Please let me know how it goes!

  • Profile Image
    gilrucker
    Answered on April 11, 2019 at 05:43 PM
    I did. Please check it now…

    ...
  • Profile Image
    Kevin_G
    Answered on April 11, 2019 at 07:10 PM

    Try setting the scrolling attribute to yes, example: 

    <iframe id="JotFormIFrame-21847127791157" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/21847127791157" frameborder="0" style="width: 1px; min-width: 100%; height:1500px; border:none;" scrolling="yes" > </iframe>

    I hope this helps. 

  • Profile Image
    gilrucker
    Answered on April 11, 2019 at 07:43 PM
    Done. Please check it again. Thank you!

    ...
  • Profile Image
    Kevin_G
    Answered on April 11, 2019 at 09:15 PM

    Upon checking your site further on mobile using an iPhone emulator, I can see the issue happens since the form container on your site is not enough to display the form. 

    Here are some screenshots where you can see the height per element, you can see which one is displaying on the highlighted section. 

    1. The form's container, which is on your site has the following size: 

    1555031340screenshot_01.png

    2. The JotForm iFrame code has enough size to display the form properly, but since the container has a reduced height the form does not display properly: 

    1555031391screenshot_02.png

    As you can see the form's code is displaying accordingly; however, the <div> element does not allow the form to display completely. Now, no matter what you do from JotFrom nothing will change how the <div> element displays on your site, I would recommend you to ask your web developer to check this or contact support in case you're using a web site builder.