How to prevent Webpage from scrolling to the embedded form on load?

Hi there can you help into this on this link it is scolling down to form section this page. i want to remove it. the page will reload normal from the top:

https://idevwork.com/Midtown-salon/php/stylist-opportunities/

Hi midtownmarionadamsig,

I understand you'd like to prevent the webpage from loading to the embedded form on load. Please try embedding your form on your webpage using the iFrame code below:

<iframe

id="JotFormIFrame-241074684062455"

title="MidtowN A Salon By Marion Adams"

onload="window.parent.scrollTo(0,0)"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/241074684062455"

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-241074684062455'", "https://form.jotform.com/")</script>

As you can see in the embed code, it indicates the page to scroll to the top of the parent window on load which will be the top of your webpage.

Give it a try and let us know if you need any help.

Hi Marion,

Thanks for reaching out to us for help. I'm sorry you're having difficulties with the embedded form in your website. I visited your webpage and tested it to see if I could replicate the issue, and I ran into the same issue. Rest assured, we'll find a solution for it. Can you try embedding your form to your webpage again using the iFrame code below?

    <iframe

id="JotFormIFrame-241074684062455"

title="MidtowN A Salon By Marion Adams"

onload="window.parent.scrollTo(0,0)"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/241074684062455"

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-241074684062455'", "https://form.jotform.com/")</script>

Give it a try and keep us updated if you need any more help.

i have use this code which you have given above it works for few minutes again it is showing scroll on home page on both pages.

https://idevwork.com/Midtown-salon/php/stylist-opportunities/

https://idevwork.com/Midtown-salon/php/

Hi Marion,

Thanks for getting back to us. I have added ?nojump at the end of the form URL used on the src attribute of the iframe embed code as provided below.

<iframe id="JotFormIFrame-241074684062455"

title="MidtowN A Salon By Marion Adams"

onload="window.parent.scrollTo(0,0)"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/241074684062455?nojump"

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-241074684062455'", "https://form.jotform.com/")</script>

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

still not working i have replaced this code on homepage

Hi Marion,

Thanks for getting back to us. I'm sorry that this is happening. I checked your website and I ran into the same issue. Can you please try to remove this onDISABLEDload="window.parent.scrollTo(0,0)" in your Iframe Code? Take a look at the screenshot below:

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

i have remove the code from the home page still not working

Hi Marion,

I just reviewed your website and the iframe embed code is not updated as shown in the screenshot.

Could you try to embed the iframe embed code provided below where I have added ?nojump to the form URL and removed the attribute onload?

<iframe id="JotFormIFrame-241074684062455"

title="MidtowN A Salon By Marion Adams"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/241074684062455?nojump"

frameborder="0"

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

scrolling="no">

</iframe>

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

i have checked thiere is no attribute in iframe code :

Hi midtownmarionadamsig,

Thanks for getting back to us. Do you have any plugins in your WordPress website that could cause the page to load on the form automatically? I recommend testing your embedded content on a new test webpage, and disable plugins for that test webpage. If the issue disappear, try enabling a few of your plugins at a time to identify the plugin that is causing the issue, and see if there's any setting on that plugin that will help prevent it from behaving unexpectedly. 

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

I have disabled all the plugins then i checked the website it is still scrolling the form section on load.

https://midtownmaristg.wpenginepowered.com/

Hi Marion,

Thanks for getting back to us. I embedded your form on a WordPress site and tested it to see if I could replicate the issue, and I ran into the same problem:

To fix this issue please embed the form using the below embed code:

<iframe

  id="JotFormIFrame-241074684062455"

  title="MidtowN A Salon By Marion Adams"

  allowtransparency="true"

  allow="geolocation; microphone; camera; fullscreen"

  src="https://form.jotform.com/241074684062455"

  frameborder="0"

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

  scrolling="no"

>

</iframe>

<script>

  var iframe = document.getElementById('JotFormIFrame-241074684062455');

  iframe.onload = function() {

    window.scrollTo(0, 0);

  };

</script>

I have added a few extra lines of code that will detect when the iframe content has fully loaded and pushed back to the top of the site. You might see a slight up-and-down effect. Here's what the result will look like:

Please give it a try and let us know how it goes. 

it is not fixed yet. first page load on it is scrolling from bottom to top rught now.

https://midtownmaristg.wpenginepowered.com/

Hi midtownmarionadamsig,

Thanks for getting back to us. I'm sorry for the inconvenience this has caused you. I understand the issue, but I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

ok let me know when the issue solved.

Hi Marion,

Can you try to disable the fullscreen mode in your iFrame embed? Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the screen, click on Publish.
2. Click on Embed on the left side of the screen.
3. Then, click on iFrame and toggle FullScreen to OFF.
   

Then you can use this iFrame code to embed the form to your website. Check out this iFrame code:

<iframe id="JotFormIFrame-241074684062455"



title="MidtowN A Salon By Marion Adams"



allowtransparency="true"



allow="geolocation; microphone; camera; fullscreen"



src="https://form.jotform.com/241074684062455?nojump"



frameborder="0"



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



scrolling="no">



</iframe>

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

Hi midtownmarionadamsig,

We really appreciate your patience and understanding while we’re looking into this. I checked your website, and I was able to replicate the issue. Can you please try this embed codes below?

If you are using an iframe, follow this:

<iframe id="JotFormIFrame-241074684062455" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.com/241074684062455?nojump" frameborder="0" style="width:100%; height:738px; border:none;" scrolling="no"></iframe>

And you can also try embedding your form as script:

<script type="text/javascript" src="//form.jotform.com/241074684062455?nojump"></script>

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

still not working it is still scrolling i have disable the full screen option. also replace the code on this page https://midtownmaristg.wpenginepowered.com/testss

Hi midtownmarionadamsig,

Thanks for getting back to us. Can you try embedding your form using the dedicated wordpress embed code? Let me show you how to do that:

• In Form Builder, in the orange navigation bar at the top of the screen, click on Settings.
• Click on Embed in the menu on the left side of the page.
• Select the WordPress element and copy the code.
• Now, just paste the copied code on the website. That's it. You're done.

Check out this guide to learn more about our WordPress plugin.

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

Still scrolling I have done all the step you said in you comment:

https://midtownmaristg.wpenginepowered.com/testss

Hi midtownmarionadamsig,

I have forwarded this issue to our back-end team for further checking. Once we have updates, you will be notified at this ticket.

Let us know if you need any other help.

OK I am waiting.

Hello Marion,

Thank you for your patience. I'm pleased to inform you that we've resolved the issue you reported. From now on, card forms won't scroll to the first field when the form is embedded.

I've also cleared the form caches to ensure that the changes take effect smoothly. I double-checked your website, and everything appears to be working correctly now.

Best regards,

still issue appears when i scroll to the form iframe section itg scrolls jump to the top section automatically.

https://midtownmaristg.wpenginepowered.com/

Hello Marion,

Upon reviewing the scroll behavior on your website, it appears that the code block you added based on my colleague's earlier instructions is causing the page to scroll to the top unnecessarily.

Could you kindly remove the existing embed code and re-embed the form using the code provided by the form builder? This adjustment should resolve the scrolling issue.

Looking forward to your response.

Best,

Hi Marion,

I tested your page, and I'm also experiencing the same issue. I did some local tests, and with the below embedding code, I was able to avoid the issue. Would you be able to test with this now that the developers made some changes?

    <iframe

id="JotFormIFrame-241074684062455"

title="MidtowN A Salon By Marion Adams"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/241074684062455"

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-241074684062455'", "https://form.jotform.com/")</script>

Please let us know how it goes and if there are any issues after adding this code instead.