Form embedded on website not fitting in iPhone 6 screen?

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

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.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

Mark

Asked on September 06, 2016 at 12:26 PM

The form looks ok when viewed in simulator/previewer but when tested on iphone 6 the form is sitting to the right.

I have checked the web page where your form is embedded on and I can see it is displaying fine on my end, I have tested with an iPhone 6 emulator, with the developer tools in Google Chrome and with a real Android device running Android 5, here is what I can see in all my tests:

What I would suggest you is to inject some CSS code to your form, as you report that only some fields are not responsive.

I've made a few updates to my form since I posted this issue with the form, I'm still having the issue with this form after updates. I have two forms embedded on my the same page on my website and this form is the only one that is not fitting to mobile phone screens. The other form responds to mobile screens perfectly. I tested this on iPhone 4, 5 and 6 and the same issue is in all devices. Both forms have the same form width, make form mobile responsive is checked and mobile responsive widget is add to them. I want both forms to fit on mobile screens. Both form look fine in the emulator but when tested on actual devices it does not fit.

I checked your form, and it appears to fit on mobile devices just fine:

Have you tried clearing your browsers cache? Also, if the form fits well through the direct link: https://form.jotformeu.com/62522384130346, but does not fit well on the embedded page, please share the URL of the page where you have embedded it, so we can test further.

markkeane

Answered on September 20, 2016 at 03:17 AM

I have two forms on our online booking page of our website, the booking form and enquiry form when you access the the page via mobile device. The booking form seems to be the issue when embedded.

Here is the direct link to the page where the forms are embedded using iframe.

Ok I changed the height as requested and all that did was add more space to the end of the form. I've reverted back to all the iframe code now. I'm still having this issue on with mobile devices in portrait view only, landscape is not an issue.

Is there some bit of code that can resolve this?

JotForm Support

Chriistian

Answered on September 21, 2016 at 09:19 AM

Hi there,

I have viewed your website in iPhone 6 and the form seems to be responsive. Please see below GIF.

Can you please share with us the screenshot in your device? If you need widths of specific controls to be change, do let us know.

Regards.

markkeane

Answered on September 21, 2016 at 10:35 AM

Ok so from the GIF above you can see the exact issue I'm having. The form isn't fitting on the screen for example if you look at the text under the heading "Online Bookings Form" at the top of the form the text is meant to read "Once we receive a complete form, we will be in touch with you shortly to confirm bookings." The word "Touch" is been cut off and the word "with" is not in the screen.When your on the webpage with the forms http://smt.ie/online-bookings/ you can pan to the left and you will see the all the text and all the fields are overflowing off the page.

The form is not as responsive as my enquiry form on the same page, so there must be an issue with the form itself.

I need to get this sorted asap as I have a lot of time spent on resolving this already.

markkeane

Answered on September 21, 2016 at 10:48 AM

Please see screenshots from my iphone 6. As you can see the enquiry form isnt an issue its the booking form.

JotForm Support

Chriistian

Answered on September 21, 2016 at 12:23 PM

I checked again your form and I was able to see what you are reporting. It seems that the width of the iFrame of the form exceeds the width of the screen which causes the text to be cut off.

No it didn't resolve the issue. I cleared the history and website data on iPhone as well.

JotForm Support

BDAVID

Answered on September 21, 2016 at 02:20 PM

I have added the following code to your booking form:

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

.form-all{

width: 85% !important;

margin-left: 10px !important;

}

}

And tested it in a real iPhone 6 device, this is how it looks now:

Please check it in your end, and let us know how it shows now, we will be glad to assist you.

markkeane

Answered on September 23, 2016 at 12:35 PM

This worked as it fits just fine now, I still have space extra space to the right side of the screen and the user can pan over when on a mobile is there anyway this can be removed so it does allow the user to pan. I only happens on this page with the forms.

Thanks for the support to date.

Charlie

Answered on September 23, 2016 at 01:59 PM

Unfortunately, I believe the problem is because you have two forms embedded on the same website page.

Your two iFrame embed code have their own <script> code, I presume you are already familiar with it. Those script code makes the form mobile responsive on a web page. However, the problem is that the same script code is pasted on the same web page. The two script codes are conflicting one another, which results to your form having different widths, the other is fitting, while the other exceeds.

Now this should easily be fixed by simply removing one of the duplicate <script> code, meaning leave one of the script codes intact, I suggest removing the one in the booking form. After that, you should only have one <script> code for the same page, the one in the inquiry form.

What should happen now is that the <script> code for the inquiry should handle both the responsiveness of the two forms. Although even this I could not guarantee a full responsiveness, it is recommended to have the forms on their own separate pages.

Here are my recommendations:

Option 1: Use the iFrame embed code but remove one of the duplicate script codes, leave only one. Try removing the CSS code shared by my colleagues when testing to avoid conflicting results.

Option 2: I see your website is powered by Wordpress.org, is that correct? Have you tried using the following plugins: