Submit button not working / iFrame affecting hyperlink

  • ccfhnc
    Asked on January 29, 2021 at 11:30 AM

    This is the location where I've embedded my form: https://www.ccfhnc.org/programs/healthy-families-durham/#contact

    I've used the regular embed code to place the form on the page: <script type="text/javascript" src="https://form.jotform.com/jsform/210266752613149"></script>

    When I click the Submit button on my form, the button flashes some other text very quickly and will not submit.

    If I embed the form in an iFrame on the page, the Submit button works.

    But, there is text on my form that is hyperlinked to another location on the page ("Eligibility & Referrals" goes to https://www.ccfhnc.org/programs/healthy-families-durham/#eligibility) and when I use an iFrame, the link takes you to the top of the page instead of to the #eligibility anchor on the page. Here is a different form embedded in an iFrame where the linked text takes you to the top of the page instead of the #eligibility anchor: https://www.ccfhnc.org/programs/durham-early-head-start-home-based-program/#contact 

    If I use the regular embed code, the link goes to the correct location on the page, but the Submit button doesn't work.

    So, I need to know how to get the regular embed code to work. Or, if using an iFrame, how to have the link go to the right location on the page.

    Thanks!

  • Ariel JotForm Support
    Replied on January 29, 2021 at 3:26 PM

    Hello there,

    Try using the iframe code and append "?nojump" to the src attribute like so:

    <iframe
        id="JotFormIFrame-1234567890"
        title="Form"
        onDISABLEDload="window.parent.scrollTo(0,0)"
        allowtransparency="true"
        allowfullscreen="true"
        allow="geolocation; microphone; camera"
        src="https://form.jotform.com/1234567890?nojump"
        frameborder="0"
        style="
        min-width: 100%;
        height:539px;
        border:none;"
        scrolling="no"
    >
    </iframe>
    <script type="text/javascript">
        var ifr = document.getElementById("JotFormIFrame-1234567890");
        // ...

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

  • ccfhnc
    Replied on February 4, 2021 at 2:01 PM

    Thanks for the quick reply!

    I added ?nojump to the src attribute on these two forms:

    https://www.ccfhnc.org/programs/durham-early-head-start-home-based-program/#contact

    https://www.ccfhnc.org/programs/healthy-families-durham/#contact

    But it’s still having the same error: when I click the “Eligibility & Referrals” link on the contact form, it still opens a new window, goes to the “Eligibility & Referrals” section of the page for a second, then jumps back up to the top of the page.

    What else can I try?

  • Ariel JotForm Support
    Replied on February 4, 2021 at 4:07 PM

    Hi there,

    The pages scroll to the correct section when I disabled JavaScript on your site so I suspect a script on your theme is causing the jump on onload; can you try changing your WordPress theme to a different theme, preferably one of those twenty-* themes, see if the issue persists.

    If that's the case, you could either disable the code that scrolls your page on onload event or try adding this code to your theme's JavaScript.

    jQuery(document).ready(function($){
        $target = document.URL.split('#');
        if($target[1]){
            $('html, body').delay(1000).animate({
                scrollTop: $('#'+$target[1]).offset().top
            }, 250);
        }
    });

    Don't forget to disable or clear your site's cache, if you have one, when testing.

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