I have tried this and it seems to work.

I have tried this and it seems to work. Expect it cuts of the last part of the iframe. I can see that other persons have had this issue. You recommend setting height of container or finding some script error, but non of this is the issue.
Last attempt was to embed it as an iFrame. You can go to to see the very basic code.
Can you spot the error?

Greetings,

Are you saying that the Iframe code has been cut off? Or the part of the form?

Can you share with us the URL of your form? You can adapt in the Iframe code the height of the form.

Waiting for your answer.

Johann

Hi Johann

Thank you very much for your quick reply. I actually added the links, but somehow they disappeared. :-)

I have a script version here : https://a-l.ink/script.html and a iframe version here https://a-l.ink/iframe.html. The original version of the form can be found here https://form.jotform.com/213005605171038. Try open one of the first two on your phone and the original version. You will see a big difference.

In order to explain the problem better I recorded a video on Loom to you. This can be viewed here:https://www.loom.com/share/f1285009b99346ba801bda12a25a1971

Best regards

Glen

Hi Glen,

Thank you for the video. It is clearer for me npw.

Could you please try to change the height and width in the iFrame? You can find the sections by searching for height and width in ctrl+f. Then you can adjust, and see if it populates correctly.

Note that you will have to paste it someplace else to make the edits, before copying and embedding.

Let me know how it goes!

Hi,

Are you saying that the issue is solved? Do you need still assistance for that?

Johann

hi Johann

No, unfortunately not. I have done what you suggested, but it is not working. I tried setting the value highter and lower as the 539px that is the default. I even changed in the script to meet the exact height of the iPhone

But that didnt work out either.

Do you have another suggestion in order to make the form show correctly?

Thank you very much.

/Glen

Hey Glen,

Allow me some time, so I can advise a better solution.

Thanks,

Johann

Hi Glen,

Can you try to inject this CSS code to your website:

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

 .jt-content{

 height: 405px !important;

overflow: hidden !important;

}

}

Johann

Hi Johann

I added the sugested css to our the webpage https://a-l.ink/iframe.html. Is it possible for you to verify that I did this correct. It didn't have any effect - as far as I can tell.

I did a test on real phones (iOS and Android) and it seems to be a problem not only in browsers simulating phones.

We dont necessary need to go with the iframe solution, we could make it another way, as long as it works.

Hi Johann

I found a solution! I believe that, for some reason, I mixed up the formid from my 3 different forms. So, the script in the iFrame code was referring to another of my forms. I dont know if this was my mistake or some caching issue in the IIS that servers the pages. However, you can consider this problem solved and I am very sorry that you had to spend time on it.

Best

Glen

Hi Mandsberg,

Thank you for letting us know that the issue is solved. Know that we are always here to assist you!

Have a nice day!

Cheers,

Nina