I need some help. I'm trying to create a Confirm Navigation Popup on WordPress. I want the popup to appear when the user tries exiting a form page without submitting the form.

Screenshot of the popup I'm talking about:

I used the Forminator form plugin to create the form in a blank page. The form consists of several required questions so it only lets the user submit the form if all of the required fields are filled in. When all of the required fields are filled in, the form accepts the submission and redirects the user to a different URL (A thank you page).

When a user enters this form page, I want a Confirm Navigation popup to appear every time the user tries exiting the page. However, the popup should not appear if the user exits the page by submitting the form.

I have found this article: /

I followed the guide to create a custom plugin and it kind of works.

Here's what I did:

1. Created a folder on my computer, called confirm-leaving-form.

2. Added a PHP file, called confirm-leaving.php, inside the confirm-leaving-form folder:

<?php
/**
* Confirm Leaving
* Plugin Name: Confirm Leaving Form
* Plugin URI: 
* Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
* Version: 1.0.0
* Author: My name
* Author URI: 
* License: GPL-2.0+
* License URI: .0.txt
*/

function wpb_confirm_leaving_js() {

wp_enqueue_script( 'Confirm Leaving Form', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');

3. Created another folder, called js, inside the confirm-leaving-form folder.

4. Added a JavaScript file, called confirm-leaving.js, inside the new js folder:

jQuery(document).ready(function($) {

$(document).ready(function() {
needToConfirm = false;
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").change(function() {
needToConfirm = true;
});

})

forminator-module-2959 is the ID of my form.

5. Uploaded the whole confirm-leaving-form folder to the "/plugins/" directory of my website (used the FileZilla FTP application).

6. Activated the new plugin on WordPress.

This created a custom plugin which almost does what I want, but not quite.

Here are the issues:

1. The popup only appears if the user has started filling out the form. If the form is empty and the user tries exiting the page, the popup does not appear.

2. The popup appears when the user has filled out the form and hits the “Submit” button. The popup should not appear if the user is trying to submit it.

Ideally, the popup should appear even if the form is empty but not appear if the user exits the form by clicking the "Submit" button.

Is this possible?

I need some help. I'm trying to create a Confirm Navigation Popup on WordPress. I want the popup to appear when the user tries exiting a form page without submitting the form.

Screenshot of the popup I'm talking about: https://ibb.co/3CvqgKH

I used the Forminator form plugin to create the form in a blank page. The form consists of several required questions so it only lets the user submit the form if all of the required fields are filled in. When all of the required fields are filled in, the form accepts the submission and redirects the user to a different URL (A thank you page).

When a user enters this form page, I want a Confirm Navigation popup to appear every time the user tries exiting the page. However, the popup should not appear if the user exits the page by submitting the form.

I have found this article: https://www.greengeeks/tutorials/article/incomplete-form-confirmation-in-wordpress/

I followed the guide to create a custom plugin and it kind of works.

Here's what I did:

1. Created a folder on my computer, called confirm-leaving-form.

2. Added a PHP file, called confirm-leaving.php, inside the confirm-leaving-form folder:

<?php
/**
* Confirm Leaving
* Plugin Name: Confirm Leaving Form
* Plugin URI: http://www.mydomainexample
* Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
* Version: 1.0.0
* Author: My name
* Author URI: http://www.mydomainexample
* License: GPL-2.0+
* License URI: http://www.gnu/licenses/gpl-2.0.txt
*/

function wpb_confirm_leaving_js() {

wp_enqueue_script( 'Confirm Leaving Form', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');

3. Created another folder, called js, inside the confirm-leaving-form folder.

4. Added a JavaScript file, called confirm-leaving.js, inside the new js folder:

jQuery(document).ready(function($) {

$(document).ready(function() {
needToConfirm = false;
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").change(function() {
needToConfirm = true;
});

})

forminator-module-2959 is the ID of my form.

5. Uploaded the whole confirm-leaving-form folder to the "/plugins/" directory of my website (used the FileZilla FTP application).

6. Activated the new plugin on WordPress.

This created a custom plugin which almost does what I want, but not quite.

Here are the issues:

1. The popup only appears if the user has started filling out the form. If the form is empty and the user tries exiting the page, the popup does not appear.

2. The popup appears when the user has filled out the form and hits the “Submit” button. The popup should not appear if the user is trying to submit it.

Ideally, the popup should appear even if the form is empty but not appear if the user exits the form by clicking the "Submit" button.

Is this possible?

• plugins
• php
• javascript

1 Answer 1

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/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.