Embedded form: Jumps to the form when we open the webpage

When I leave my form on Classic Form, I can open up the webpage and scroll down to find my form. However, when I change it to Card Form, I open up the webpage and it will immediately jump down to my form. How can I avoid this?

Hi Forum_Leadership,

Thanks for reaching out to Jotform Support. I opened your website and checked it to see if I could replicate the issue, but everything was working properly and it doesn't jump directly to the form. Check out the screencast below to see my results:

Can you please try to re-embed your form using the Iframe? Can you try it again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on.

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

Hi Kyle

That is so strange. I have tried using different devices but each time it would jump straight to the form, unlike what you experienced.

In fact, it is also happening on this site: https://sandbox.esambouw.com/programs/summit/

So that's 2 sites, same form, and been on different devices with the same problem.

Could you help to identify the problem?

Hi Forum_Leadership,

Thanks for getting back to us. When I clicked on the links that you provided, I was able to replicate the problem. Can you try re-embedding your form using the iFrame Code? Let me show you how:

• In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
• In the menu on the left side of the page, click on Embed.
• Now, select iFrame, and copy the code.
• That's it. Embed your link on your webpage and you're done.

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

Hi Joshua,

We've tried re-embedding our form using the iFrame code, however the same thing happened - it still jumps to the form when we open the webpage. We've also tried using Jotform's WP oEmbed plugin and it is still acting the same way.

Hi Forum_Leadership,

We are sorry that this is happening. I've checked the website where your form is embedded and was able to experience the issue. Could you please try to remove  onDISABLEDload="window.parent.scrollTo(0,0)" from your iFrame code? Take a look at the screenshot below:

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

Hi Chris,

We tried changing the code from onload to onDISABLEDload, and we also tried removing onDISABLEDload="window.parent.scrollTo(0,0), but we experienced the same issue. Not quite sure what we're doing wrong.

Hi Forum_Leadership,

Thanks for the feedback. I do apologize that the issue still persists. Just like my colleagues, I've experienced the same when visiting the website. That is, the form shows up right at the top part of the web page, just below the homepage tabs. See screencast below:

Please try re-embedding the form but this time, add the ?nojump to the code. Here's a sample:

src="https://form.jotform.com/240584196234459?nojump" frameborder="0" style="min-width:100%;max-width:100%;height:539px;border:none;"

The code above is located around the first part of the entire code, as shown in the screenshot below:

Make sure to test it with onload and onDISABLEDload functions, to see which one will work. May I also suggest loading the website using a different browser, or in Incognito (Private) Mode. Clearing the browser's cache and cookies might do the trick, too.

Keep us updated and let us know if you need any more help.

Hi Rene,

Unfortunately it happened again. We modified the code and cleared the browser's cache but it still happened. Do you have any other solutions?

Hi Vanessa,

Thanks for getting back to us. I tested your form and had the same issue. Could you try embedding the form again using the iFrame code but without the script tags? You may also try adding the "?nojump" parameter after the link on the src field.

    <iframe

      id="JotFormIFrame-240084139265051"

      title="Register for the 2024 LFC Summit TODAY!"

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

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

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

      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.

Hi. I am Vanessa’s developer. I have tried exactly as Raymond suggested to no avail. It is still jumping, highlighting the ‘Next’ button.

Hi Esa,

Thanks for reaching out to us for help. If you are embedding the form, use the following code:

  <iframe

id="JotFormIFrame-240084139265051"

title="Register for the 2024 LFC Summit TODAY!"

onLoad="self.scrollTo(0,0)"

allowtransparency="true"

allowfullscreen="true"

allow="geolocation; microphone; camera"

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

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.

Thanks for the recommendation, Mohammad. Tried it and it is still jumping.

I have tried multiple browser and incognito mode to test and it's still like that.

Hi Forum_Leadership,

On testing a cloned form on my website, I was able to replicate the issue. However, I was able to fix it by injecting the following CSS and Javascript to turn off the autofocus on the Cards form when it was loaded.

<script type="text/javascript">

    $(document).ready(function(){

      $("#JotFormIFrame-240084139265051").addClass("display_none");

    

    $(window).on('load', function(){ 

      $("#JotFormIFrame-240084139265051").removeClass("display_none");

      });

    });

</script>

<style>

.display_none{

         display:none;

 }

</style>

We remove the iframe with display:none, when the dom is ready. Next, when the window is completely loaded, we bring it back. To do that efficiently, we write a style class like the above and we will add this class to our iframe, when the document is ready, and remove this class when the window is fully loaded.

Check out the screencast below:

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

Thank you for this recommendation. I will give it a try. So what are the steps?

1. I use the previous iFrame

2. And where do I add these codes in WordPress? The CSS style can be added to the custom CSS. And the Javascript? Is that in addition to the iFrame?

Hi Forum_Leadership,

Thanks for getting back to us. The codes provided by my colleague can be embedded on your website just like when you're embedding using the script method. The CSS code in the code must be included on the embed codes, and not in the CSS section in Form builder.

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

Hi Raymond. Thank you. So this will be in addition to the iFrame code right?

Hi Forum_Leadership,

You can use the same iframe code that you had, and then add the code that I shared above the iframe code. You can just re-verify that the ID of the iFrame element is #JotFormIFrame-240084139265051.

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

Hello,

We tried to do as you suggested and it worked but depending on certain circumstances.

For example, on my laptop it works on Safari and my phone but not on Chrome (even after deleting cache). For another person, it didn't work on their laptop but worked on their phone. Someone else reported that it jumped on their phone too.

How could we ensure that everyone has the same experience?

Hi Forum_Leadership, 

Thanks for getting back to us. I checked your page, but the form isn't embedded there. Try to embed the form again, so we can check if we'll experience the same on our end.

Let us know if you have any other questions.

Hi Mightor,

Allow me to send you the link again: https://www.leadershipforumcommunity.org/programs/2024-summit/

The form is still there.

Hi Forum_Leadership,

I reviewed your website and noticed that there were console errors related to jQuery. Check out the screenshot of the console errors:

I have used a script in jQuery. If your website is not using jQuery, then you have to import the jQuery libraries in the head section. Can you please contact your web developer to import the related libraries or write the script in JavaScript if your website is using plain JavaScript? I have used the following libraries in the head section of my website:

   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>  

Checkout the screenshot below:

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

Hi Sweta,

Thank you for the help. I did implement the code and it seems to help with the issue. However, we are still having some issues with some machines (one of them is a MacBook Pro running on Chrome). We have tried accessing from an incognito window and it is still acting up. Or does it have anything to do with the cache?

Hi Esa,

Thanks for getting back to us. I cleared your form's cache which should help. Can you try checking it again and see how it goes? If the same thing happens again, kindly let us know with the device and browser you're using, as well as a screenshot or a quick recording of what's happening.

Keep us updated and let us know how it goes.

Hi Esa,

In addition to my previous response, kindly clear your browser's cache and if the issue persists, please send us a screenshot of the screen showing the console log of the browser. This will help us understand what's happening and assist you further.

Keep us updated and let us know how it goes.

Hi Raymond,

I have cleared my browser's cache and the issue persists - upon opening the site, it jumps straight to the form. Please find attached a screenshot of the console log.

Hi Raymond,

I have asked others to check and it looks like the jumping mostly happens on Chrome, even though there are exceptions. We have not heard of any problems when accessed using a mobile phone, all are using laptops.

Hi Esa,

Thanks for getting back to us. We visited the link where your form is embedded using the Chrome browser, and it appears to be working as expected. Check out this screencast below:

To confirm, after implementing the code provided by my colleague, can you access the link where the form is embedded with no problem except for 1 MacBook Pro that is using the Chrome browser?

Once we hear back from you, we can move forward with a solution.

Hi Joshua, it is working now because we are no longer using the multi-page form. The issue is exclusively with that type of form.

Is iFrame the only available option to embed JotForm on WP?

Hi Esa,

Thanks for getting back to us. I am glad to hear that the problem has already been resolved. We have several method of embedding the form, you can find them under the Publish tab in the Embed section.

The reason why we recommend using the iFrame Code is that this method is designed to work on any web page. Since the form is displayed inside an iframe, it’s less likely to cause conflict with anything on your website.

Let us know if you have any other questions.