Next button is moving incorrectly when viewed on mobile

Hi,

I'm having issues with the 'next' button on page 5 of the two forms below

Referral form SA - https://form.jotform.com/250187155222855

Referral form NSW - https://form.jotform.com/250044938342455

The issue I'm experiencing is that when the next button is clicked on this page, for some reason, it scrolls to the bottom of the page automatically. This is especially prevalent on mobile and tablet as it leaves you at the bottom of the page.

Feel free to have a go on the form, you'll see what I mean.

What I need you to do:

Please, can you diagnose what's causing this glitch and fix it for me? 

Thanks

Hi Sunflower_Services,

Thanks for reaching out to Jotform Support. I tested both forms using a mobile phone and I was not able to replicate the issue. See screencasts below:

Referral form SA:

Referral form NSW:

I've cleared your cache and can see that your form is working fine. Can you go ahead and try it again and let us know how it goes? If the same thing happens again, we'll investigate it more to see if we can figure out what's going on. You can also share with us a screen recording of what’s happening so we can try to replicate it on our end. You can share the video recording on any public sharing platform like Google Drive or Dropbox, or you can simply use Loom to record the video and share the video link with us.

Give it a try and let us know how it goes.

Hey there,

Just tested it again, and it still seems to be happening.

Screen recording here - https://we.tl/t-wrko50PjVk

Were you testing it an actual mobile device or a mobile simulator?

If you could do some further investigation into the back end it would be fabulous.

many thanks

Hi Sunflower_Services,

The issue could be a conflict with your website and form script. To fix this, you can try embedding the form using Iframe code. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. In the menu on the left side of the page, click on Embed.
3. Now, select the Iframe embed option you want to use, and click on Copy Code. (I used the iFrame method only to show in this case.)
4. Paste your code into your webpage's embed area, and that’s it.

Give it a try and let us know if this works for you.

Hi there,

The two forms were initially embedded with iframe, which is when I first noticed this issue.

On Monday, I tried embedding them normally to see if this would fix the issue but it still occurred.

Thanks

Hi Sunflower_Services,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

We appreciate your patience while we work on a solution.

Hi Sunflower_Services,

I tried to embed the form to our WordPress site and was not able to replicate the issue. See screencast below:

Can you try to use the embed codes below to force the form to load at the top on Next button. The script may trigger further adjustments after the iframe’s onload event, a slight delay can help ensure the override happens last.

For Referral Form SA:

 <iframe

id="JotFormIFrame-250187155222855"

title="Referral Form SA"

onload="setTimeout(function(){ window.parent.scrollTo(0,0); }, 150);"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://formjotform.claystructures.com/250187155222855"

frameborder="0"

style="min-width:100%;max-width:100%;height:539px;border:none;"

scrolling="no"

>

</iframe>

<script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'></script>

<script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-250187155222855']", "https://formjotform.claystructures.com/")</script>

For Referral Form NSW:

<iframe

id="JotFormIFrame-250044938342455"

title="Referral Form NSW"

onload="setTimeout(function(){ window.parent.scrollTo(0,0); }, 150);"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://formjotform.claystructures.com/250044938342455"

frameborder="0"

style="min-width:100%;max-width:100%;height:539px;border:none;"

scrolling="no"

>

</iframe>

<script src="https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js"></script>

<script>

window.jotformEmbedHandler("iframe[id='JotFormIFrame-250044938342455']", "https://formjotform.claystructures.com/");

</script>

If the issue persist, we recommend reaching out to your web developer as the issue may be specific to your website.

Give it a try and let us know there’s anything else we can help you with.

Hi Sunflower_Services,

In addition to my reply, if the above codes didn't work, try to append this JS code below after the form's iframe embed code:

(function () {

window.addEventListener('message', function (e) {

if (typeof e.data !== 'string') return;

if (!e.origin.includes('jotform')) return;

if (e.data.startsWith('scrollIntoView')) {

setTimeout(() => {

window.scrollTo({ top: 0, behavior: 'smooth' });

}, 100);

}

});

})();

</script>

If issue still persists, you may reach out to your Web Developer for further assistance.

Give it a try and let us know how it goes.