JotForm embed script/iFrame breaking anchors tags on web page

  • Profile Image
    mwhughes87
    Asked on May 04, 2017 at 02:46 PM

    We have two jotforms embeded on a event landing page. The landing page has anchors throughout the page that links to them via the floating menu on the sidebar, and what is supposed to be direct linking. However, the direct linking is not working, the page loaded where it is supposed to and when the scripts are brought over it jumps back to the top.

    I have isolated the problem to the forms by creating an identical test page, except that the embeded forms have been removed and the direct linking has no issue.

    Has anyone had any other issues with this. Is there a way to resolve?

     

     

  • Profile Image
    AIDAN
    Answered on May 04, 2017 at 04:06 PM

    Upon inspection of the landing page you kindly provided, and after examining all the links and going back to that one, I found that you're having two instances of the form embed:

    <div class="custom rt-center box3 title1 ipc-reg largemarginbottom">

    <script type="text/javascript" src="https://form.jotform.us/jsform/71218062955154"></script></div>

    and

     <a name="registration"></a>

     <iframe id="JotFormIFrame-71218062955154" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.us/71218062955154" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>...etc

    Please consider removing them and using just one instance using the iFrame method, as I have noticed some incompatibilities that manifest as console errors.

    Just for completeness, here is our guide on how to get your form iFrame embed code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    This should result in just one form embed, using the iFrame method, eliminating all incompatibilities.

    I hope this helps. If you need further assistance please let us know. Thank you.

  • Profile Image
    mwhughes87
    Answered on May 08, 2017 at 08:06 PM

    This did not fix the error. I have added the iframe form the testing link, and only used the instructions that you provided above. You can see here that the direct linking (anchor links) are still not working properly, it loads the page where it should and when the iframe loads, it jumps to the top of the page.

    We want to have this functionality working as we have some campaigns set up for the event that are supposed to direct link to the registration field.

    Thank You for Any Assistance.

  • Profile Image
    jonathan
    Answered on May 08, 2017 at 10:53 PM

    I was able reproduce the issue on the anchor tags not working for the form. I test the URL https://meridianuniversity.edu/berlin-integral-practitioner-convergence-mock-up#registration and when the page load, it did not go to the Registration section where the form is.

    This is a known issue of the anchor link not working consistently when using the iframe embed code of the form.  It actually work consistently when using the JS embed code or the form's source code.

    Can you please try first re-embedding the form again on your website using instead the default script embed code. 

    We can test further the URL link https://meridianuniversity.edu/berlin-integral-practitioner-convergence-mock-up#registration while using the JS script embed code.

    We will wait for your updated response.

     

  • Profile Image
    mwhughes87
    Answered on May 12, 2017 at 02:07 PM

    I've switched out the <iframe> code and have re-embedded the JS <script> embed code and having the same issue.

  • Profile Image
    AIDAN
    Answered on May 12, 2017 at 02:25 PM

    I have examined https://meridianuniversity.edu/berlin-integral-practitioner-convergence-mock-up#registration under the developer tools (F12 in Google Chrome browser) and found some console issues that may shed some light on the part of your code that is causing this:

    As this belongs to you, could you please have it inspected on your side and get back to us if we can be of any help? Thank you in advance.

  • Profile Image
    mwhughes87
    Answered on May 12, 2017 at 10:20 PM

    I have resolved all critical console errors on that page and am still having the same issue? Perhaps Inline code might be able to do the trick?

  • Profile Image
    jonathan
    Answered on May 13, 2017 at 06:16 AM

    I think its working as it should now. Because when I load this URL on my browser 

    https://meridianuniversity.edu/berlin-integral-practitioner-convergence-mock-up#registration

    it was anchored on the form itself.

     

    Can you please try also. Let us know if still not working for you.

     

     

     

  • Profile Image
    mwhughes87
    Answered on May 13, 2017 at 01:15 PM

    This is now working in Chrome and IE, but not Firefox or Safari.

  • Profile Image
    Mike
    Answered on May 13, 2017 at 06:23 PM

    Please try the iFrame with removed onload="window.parent.scrollTo(0,0)" code.

    This will most likely fix the issue.

  • Profile Image
    mwhughes87
    Answered on May 31, 2017 at 07:13 PM

    My apologies for the late response.

    The above did not fix the issue in Firefox or Safari. The anchors work in Chrome and IE/Edge, but not the others. I don't think it is a bug in those browsers as anchor links work when the form isn't there.

    Currently the form is embed, with the iframe code, on the following page without the 'onload="window.parent.scrollTo(0,0)"' in the iFrame Code, as recommended above.

    Test page:

    https://meridianuniversity.edu/berlin-integral-practitioner-convergence-mock-up

    Anchors can be found in the side-menu to be added to the url but they are:

    #what
    #whatIsAIP
    #whyTheIPC
    #catalysts
    #registration

    We would like for the external anchor links to work for last minute marketing push.

  • Profile Image
    Mike
    Answered on May 31, 2017 at 07:21 PM

    Please also embed the second form with the modified iFrame code to see if that helps.

    Thank you.

  • Profile Image
    mwhughes87
    Answered on May 31, 2017 at 07:35 PM

    That fixed it. Completely forgot about the JotForm in the footer section. When I switched this to iframe and removed the onload code, all of the anchors started working in FF and Safari.

    Thanks for the Help!!!