Creating an Exit Confirmation Popup

First things first, change the name of the functions – you have them the same as the tutorial – as a rule, always make them something unique just to reduce the possibility of conflicts. So instead of wpb_confirm_leaving() you should maybe change it to something like jkkr_confirm_leaving. Just make sure you change it everywhere. But really that’s just me being extra cautious and pedantic. Now, to address the issues you’re having… They’re javascript issues…

jQuery( document ).ready( function( $ ) {
    $( document ).ready( function() {
        /* You have it set as 'needToConfirm = false when the document loads. */
        //needToConfirm = false;
        /* Let's make it true instead. */
        needToConfirm = true;
        window.onbeforeunload = askConfirm;
    } );
    function askConfirm() {
        if( needToConfirm ) {
            /* Put your custom message here. */
            return 'Leaving so soon? Your data will be lost if you continue.';
        }
    }
    /* Next, you actually have the above functions executing when you change the form,
       or more correctly being set to true, when you change the form.
       So instead, let's change the status of needToConfirm to FALSE if the user is 
       clicking submit, because you're already validating the form using 
       Forminator with required fields and all that, so, assuming they have 
       filled everything out correctly and they click submit, we want to just
       let them happily leave the page. 
       Quick note, if you can get the id="" of the submit button, 
       you can swap that out below instead of my ambigious guess. */
    $( '#forminator-module-2959 input[type="submit"]' ).on( 'click', function() {
        needToConfirm = false;
    } );
} );

You can also just remove all of my comments but the basic gist of it is as follows…

1. When the page with the form loads we’re going to immediately set the needToConfirm to TRUE.
2. Now that the needToConfirm is TRUE as soon as the page loads, we’re going to leave it as such until someone clicks the input[type=submit] for this specific form, at which point, since the validation for the form is now handled by Forminator, we’re going to set the needToConfirm to FALSE because it’s no longer required, the user has filled out the form and we don’t want to pester them.

The way the tutorial works is based on only setting the the message up to be displayed if the user has bothered to actually interact with the form.

UPDATE

So a couple of things, I just realized now that we were wrapping a document.ready inside of another document.ready, that was redundant.

Your first issue is because the script appears on every page, so it’ll execute on every page because we’ve set the needToConfirm variable as true from the outset. I have remedied that by first checking if the form exists before doing anything else. if( $( '#forminator-module-2959' ).length > 0 )

For the second issue, well that’s actually the browser’s doing:

Note: To combat unwanted pop-ups, some browsers don’t display prompts created in beforeunload event handlers unless the page has been interacted with. Moreover, some don’t display them at all.

Read the spec here: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

The third issue, in my original snippet I wrote:

Quick note, if you can get the id=”” of the submit button, you can
swap that out below instead of my ambigious guess.

I was genuinely guessing and it turns out that I was targeting a non-existent element. Now the key here is that clicking SUBMIT is what disables the message. But since there is no input[type="submit"] the message never got disabled. Looking at your code I found that $( '#forminator-module-2959 #submit button' ) is the correct element to target. So I’ve swapped that out in the code and now, clicking it, should disable the message when exiting the page.

jQuery( document ).ready( function( $ ) {
    /* First, lets restrict this to pages that actually have the form... */
    if( $( '#forminator-module-2959' ).length > 0 ) {   
            // Set the need to confirm to true
            var needToConfirm = true;
            window.onbeforeunload = askConfirm;
            function askConfirm() {
                if( needToConfirm ) {
                    /* Put your custom message here. */
                    return 'Leaving so soon? Your data will be lost if you continue.';
                }
            }
            $( '#forminator-module-2959 #submit button' ).on( 'click', function() {
                needToConfirm = false;
            } );
    }//endif
} );

This should get you much closer to what you’re after.