Creating an Exit Confirmation Popup for WordPress Forms

Question

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: https://ibb.co/3CvqgKH

I used the Forminator form plugin to create the form.

I have found this article: https://www.greengeeks.com/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 folder:

<?php
/**
* Confirm Leaving
* Plugin Name: Confirm Leaving Form
* Plugin URI: http://www.mydomainexample.com
* 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.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/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.

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 does not appear if the user has not answered any radio, checkbox, select etc. questions. Text input questions do not trigger the popup.

3. 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, I would like the exit confirmation popup to appear even if the from is empty but not appear when the user completes the form and tries to submit it.

Is this possible?

The URL of my form page: https://mydreamtattoo.com/tattoo-design-form/

Answer 1

Since your goal is to trigger the leave intent even if the user does not interact with the form, what you desire is no different than a normal leaving intent for a page. I'd consider using a plugin designed for that rather than this approach. If you want to try to keep going down this path, you could modify your javascript like this:

var needToConfirm = true;

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Leaving so soon? Your data will be lost if you continue.";
    }
}

jQuery(document).ready(function($) {
    window.onbeforeunload = askConfirm;

    $("#forminator-module-2959").on('submit', function() {
        needToConfirm = false;
    });
});

This basically sets it so that by default it "needsToConfirm" but if they submit the form it transitions needToConfirm to false. Most likely you'd probably want much more detailed javascript that handles use cases for validation, but that's the gist of it.

For what it's worth, the code in that author's article is not good. If it meets your needs, that's fine, but really the entire approach of making a plugin for this is silly.