How to Show Confirm Navigation Popup for Forms in WordPress

There’s nothing more frustrating than filling out a WordPress form, only to hit the back button by mistake and lose everything. We’ve all been there — and it’s usually enough to make someone give up right away.

For site owners, that small hiccup can mean lost sales and fewer signups. Visitors will leave annoyed and are far less likely to come back and try again.

The good news? There’s an easy fix: a confirm navigation popup. This simple warning gives users a second chance before they leave a page with an unsubmitted form.

In this guide, we’ll show you how to add this feature to your WordPress forms so you can create a smoother experience and boost your form completion rates.

What Is a Confirm Navigation Popup and Why Do You Need It?

A confirm navigation popup is a browser warning that appears when a user with unsaved changes in a form tries to leave a webpage.

You’ve likely seen this feature in action on the WordPress content editor screen. If you have unsaved changes and try to leave the page, a warning popup appears to prevent you from losing your work.

Adding this to your own forms is a small change with big benefits:

• Improves User Experience: It saves visitors from the frustration of accidentally losing their progress, showing that you value their time.
• Increases Conversion Rates: By preventing accidental abandonment, you give users a second chance to complete the form, which can increase leads.
• Builds User Trust: A thoughtful feature like this demonstrates professionalism and care, which can help build loyalty and encourage return visits.

With that in mind, let’s add this warning to your WordPress comments and other forms on your site.

Here’s everything we’ll cover in this guide:

• Method 1: Show Confirm Navigation Popup for Unsubmitted Forms in WordPress
• Method 2: Add the Warning Popup to Other Forms in Your WordPress Site
• Bonus: Improve Your WordPress Form Performance
• Frequently Asked Questions About Confirm Navigation Popups
• Additional Guides for Using WordPress Forms

Ready? Let’s get started.

Method 1: Show Confirm Navigation Popup for Unsubmitted Forms in WordPress

This method involves creating a simple, custom plugin.

Don’t worry if you’ve never coded before! We’ll walk you through every step of the process, and it’s a great way to see how WordPress plugins work.

Plus, you can also download the plugin at the end of this tutorial to install it on your website.

However, we highly recommend creating the plugin yourself to better understand how the code works. You can follow along on a local installation or staging site first.

First, you need to create a new folder on your computer and name it confirm-leaving. Inside the confirm-leaving folder, you’ll create another folder and name it js.

Now, let’s open a plain text editor like Notepad and create a new file. Inside, simply paste the following code:

<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.wpbeginner.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:      WPBeginner
 * Author URI:  https://www.wpbeginner.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', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

This PHP function uses wp_enqueue_script, which is the official WordPress method for adding JavaScript. This is the best practice because it helps prevent script conflicts with other plugins.

Now, save this file as confirm-leaving.php inside the main confirm-leaving folder.

Now, we need to create the JavaScript file that this plugin is loading. You can do this by creating a new file in your text editor and pasting this code inside it:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

This JavaScript detects if a user has started filling out the comment form. If they try to leave the page before submitting, it triggers the warning popup.

Go ahead and save this file as confirm-leaving.js inside the js folder you created earlier.

After saving both files, this is what your folder structure should look like:

Now, you need to connect to your WordPress site using an FTP client. For step-by-step instructions, you can see our guide on how to use FTP to upload WordPress files.

Once connected, you’ll need to upload the confirm-leaving folder to the/wp-contents/plugins/ folder on your website.

After that, you’ll want to log in to the WordPress admin area and head over to ‘Plugins.’

From here, you should see the ‘Confirm Leaving’ plugin in the list of installed plugins. You can then click on the ‘activate’ link below it.

That’s it. You can now visit any post on your website, type something in the comment form, and then try to leave the page.

Then, a popup will appear, warning you that you have unsaved changes.

For security reasons, modern web browsers will display their own generic warning message (like “Leave site? Changes you made may not be saved.”) instead of the custom text from the code. The code’s purpose is simply to trigger this standard browser prompt.

Method 2: Add the Warning Popup to Other Forms in Your WordPress Site

You can use the same code to target any other form on your WordPress site, such as a contact form.

In this example, we are targeting a form made with the WPForms plugin, but these steps will work if you use a different contact form plugin on your website.

Don’t have a contact form and want to build one? Then you can check out our guide on how to create a contact form.

At WPBeginner, we use WPForms to embed many different forms, including our contact form, annual readers survey, and migration requests. If you’re curious about the tool and what it can do, you can head over to our complete WPForms review.

The first thing to do is to go to the page where you have embedded your contact form.

Then, you’ll take the mouse over to the first field in your contact form, right-click, and then select ‘Inspect’ from the browser menu.

From here, you’ll want to locate the line that starts with the <form> tag to find the ID attribute. In this example, our form’s ID is wpforms-form-170.

Once you’ve found the tag, go ahead and copy the ID attribute.

Now, open your confirm-leaving.js file to edit the jQuery selector. You’ll need to add your form’s ID right after #commentform, separated by a comma. Be sure to add a # prefix to your new ID, just like the comment form has.

Your code will now look like this:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

If everything looks good, then you can save your changes to the confirm-leaving.js file and upload it back to your server, overwriting the old file.

Now, you can enter any text into any field of your contact form and then try to leave the page without submitting the form. A popup will appear with a warning that you have unsaved changes.

📥 Plugin Download: You can download the confirm-leaving plugin here, then install and activate the plugin as usual. If you need help, then you can go through our guide on how to install a WordPress plugin.

Do note that it targets the comment form, but you can edit the plugin to target your user registration form, surveys, feedback form, job application form, or any other forms.

Bonus: Improve Your WordPress Form Performance

After you add the confirm navigation popup, it’s a good idea to track how often users abandon their forms. Knowing this data can help you find and fix issues that cause people to leave.

One of the best tools for tracking form abandonment is MonsterInsights. It’s the best Google Analytics plugin for WordPress. Its Forms addon (available in the Pro version) makes it easy to automatically track form views and submissions.

This way, you can see how users interact with your forms right from your dashboard.

At WPBeginner, we use MonsterInsights to track all of our important conversions, including forms, buttons, and affiliate links. Check out our complete MonsterInsights review to learn about all its features.

For more details, please see our guide on how to track and reduce form abandonment.

You can also run A/B split tests to see which version of your form performs better. For example, you could test different form styles or button text to see what encourages more completions.

For example, you could change the wording of your confirm navigation popup or customize your form. By analyzing the results, you can determine what keeps users engaged and helps reduce abandonment rates.

Thrive Optimize is the best plugin for this task. It lets you run A/B split tests easily without any coding.

To learn more, see our guide on how to do A/B split testing in WordPress.

Frequently Asked Questions About Confirm Navigation Popups

Will adding this code slow down my website?

No, not at all. The JavaScript code is very lightweight and only runs when a user tries to leave a page with an altered form. It will have no noticeable impact on your site’s performance.

Can I change the message in the confirmation popup?

Unfortunately, no. For security reasons, modern browsers no longer allow websites to display a custom message in the confirmation popup. They will always show a generic, standard warning to the user.

Does this confirmation popup work on mobile browsers?

Yes, the onbeforeunload event is supported by most modern mobile browsers, including Chrome and Safari on both Android and iOS. The behavior will be the same as on a desktop.

Additional Guides for Using WordPress Forms

We hope this article helped you show the confirm navigation popup for your WordPress forms.

You may also want to check out these other guides and expert picks:

• How to Create a Contact Form with Multiple Recipients
• How to Send Confirmation Emails After WordPress Form Submissions
• Ways to Use Conditional Logic in Your WordPress Forms
• Best Online Form Builders (Expert Picks)
• The Ultimate Guide to Using WordPress Forms

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.