How to Add Unsaved Changes Confirmation Popups to WordPress Forms

Nothing frustrates users more than accidentally closing a page with an unsaved comment or half-filled form. Recently, a reader asked us how to display a confirmation popup to warn visitors before they navigate away. This simple feature can save your site's engagement by preventing data loss. In this guide, we'll show you how to implement navigation confirmation popups for WordPress comments and other forms, drawing from our years of hands-on WordPress development experience.

What is a Navigation Confirmation Popup?

Imagine a user typing a detailed comment on your blog post. They get distracted, close the tab, and poof—their input vanishes. A confirmation popup acts as a safety net, prompting them to stay and submit.

This is the same mechanism you'll see in the WordPress post editor: try leaving with unsaved changes, and a warning appears.

Let's replicate this for your site's comments and custom forms.

Implementing Confirmation Popups for WordPress Forms

We'll build a lightweight custom plugin—perfect for developers wanting full control. (Download the ready-to-use version at the end.) Test this on a staging site first for best results.

Create a new folder named confirm-leaving on your computer. Inside it, make a js subfolder.

Open a text editor (like VS Code or Notepad++) and create confirm-leaving.php with this code:

<?php
/** * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI: https://www.wpbeginner.com
 * Description: Warns users before leaving pages with unsaved form data, like comments.
 * Version: 1.0.0
 * Author: WPBeginner
 * Author URI: https://www.wpbeginner.com
 * License: GPL-2.0+
 * License URI: https://www.gnu.org/licenses/gpl-2.0.txt */

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

This enqueues a JavaScript file site-wide.

Next, create confirm-leaving.js in the js folder:

jQuery(document).ready(function($) {
    var needToConfirm = false;
    window.onbeforeunload = function() {
        if (needToConfirm) {
            return 'You have unsaved changes that will be lost.';
        }
    };
    $('#commentform').change(function() {
        needToConfirm = true;
    });
});

This script monitors the comment form for changes and triggers a browser-native warning on exit attempts.

Your folder structure should now look like this:

Upload the confirm-leaving folder to /wp-content/plugins/ via FTP (see our FTP guide).

Log in to your WordPress dashboard, go to Plugins, and activate "Confirm Leaving".

Test it: Visit a post, type in the comment field, and try to leave. The popup appears!

Extending to Other Forms (Like Contact Forms)

Adapt the code for any form. For a WPForms contact form:

Right-click a form field, select Inspect, and note the form's ID (e.g., wpforms-form-170).

Edit confirm-leaving.js, adding the form ID:

    $('#commentform, #wpforms-form-170').change(function() {
        needToConfirm = true;
    });

Upload the updated file. Now it protects both comments and your contact form.

Download the plugin (targets comments by default—edit for more forms).

That's it! This trusted method has helped countless sites reduce bounce rates from form abandonment. For more, check our top jQuery tutorials.

Subscribe to our YouTube channel for video guides. Follow us on Twitter and Facebook.