Customer with iPhone cannot see submit button

Gillian

Asked on April 10, 2019 at 5: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.

Page URL: https://www.pitstopautoglass.com/schedule.htm
denis_calin Jotform Support

Replied on April 10, 2019 at 7: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" onDISABLEDload="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.

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

Replied on April 11, 2019 at 2: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?

...
denis_calin Jotform Support

Replied on April 11, 2019 at 3: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" onDISABLEDload="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!
gilrucker

Replied on April 11, 2019 at 5:43 PM

I did. Please check it now…

...
Kevin Support Team Lead

Replied on April 11, 2019 at 7:10 PM

Try setting the scrolling attribute to yes, example:

<iframe id="JotFormIFrame-21847127791157" onDISABLEDload="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.
gilrucker

Replied on April 11, 2019 at 7:43 PM

Done. Please check it again. Thank you!

...
Kevin Support Team Lead

Replied on April 11, 2019 at 9: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:

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:

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.