How to Show Confirm Navigation Popup for Forms in WordPress

Accidentally closing a page without submitting your comment or with a half-filled form can be super frustrating. Recently, one of our users asked us if it was possible to show their readers a confirm navigation popup.

This tiny little popup alerts users and prevents them from accidentally leaving half-filled and unsubmitted forms. It’s a good way to improve the user experience and prevent visitors from having to start something from scratch.

However, if this feature isn’t set up right, it can be annoying and disrupt your site, frustrating users. You’ll need a reliable way to add it smoothly and avoid these problems.

That’s why we want to show you how to do this using a custom-built plugin. Don’t worry, it’s easier than you think!

In this article, we will show you how to show confirm navigation popup for WordPress forms.

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

Let’s suppose a user is writing a comment on your WordPress blog. They have already written quite a few lines, but they get distracted and forget to submit comments. Now, if they close their browser, then the comment will be lost.

The confirm navigation popup gives them a chance to finish their comment.

This feature is shown in action in the WordPress post editor screen. If you have unsaved changes and you try to leave the page or close the browser, a warning popup will appear.

Setting up a confirm navigation popup can improve user experience, conversion rates, and user trust.

Here’s how: Giving users a warning feature shows that you care about your users’ experience, which can help foster loyalty and return visits. Users are more likely to complete forms or comments if they know they won’t lose their progress.

With that in mind, we’ll show you how to add this warning feature to WordPress comments and other forms on your site. Here’s a quick overview of all the things we’ll talk about in this guide:

Ready? Let’s get started.

Show Confirm Navigation popup for Unsubmitted Forms in WordPress

For this tutorial, we will be creating a custom plugin, but don’t worry. You can also download the plugin at the end of this tutorial to install it on your website.

However, for a better understanding of the code, we will ask that you try to create your own plugin. You can do this at 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]
<?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
		
		
[/php]

This PHP function simply adds a JavaScript file to the front end of your website.

Go ahead and save this file 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 paste this code inside it:

[javascript]
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
		
		
[/javascript]

This JavaScript code detects if the user has unsaved changes in the comment form. If a user tries to navigate away from the page or close the window, it will show a warning popup.

You’ll then want to save this file as confirm-leaving.js inside the js folder.

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 all. You can now visit any post on your website, write some text in any field of the comment form, and then try leaving the page without submitting.

A popup will appear, warning you that you are about to leave a page with unsaved changes.

Add the Warning Popup to Other Forms in Your WordPress Site

You can use the same code base to target any forms on your WordPress site. Here, we will show you an example of using it to target a contact form.

In this example, we are using the WPForms plugin to create a contact form. The instructions will be the same if you use a different contact form plugin on your website.

The first thing to do is to go to the page where you have added 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, let’s edit the confirm-leaving.js file and add the ID attribute after #commentform. Just make sure you separate #commentform your form’s ID with a comma. You will also need to add a # sign as a prefix to your form’s ID attribute.

Your code will now look like this:

[javascript]
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
		
		
[/javascript]

If everything looks good, then you can save your changes and upload the file back to your website.

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.

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 Tip: Improve Your WordPress Forms’ Performance

After you add the confirm navigation popup, it’s a good idea to track how often users abandon their forms.

Knowing how many people leave without finishing can help you see how well your site is working for them. This way, you can find out what might be causing them to leave and make improvements.

One of the best tools for tracking form abandonment is MonsterInsights.

It’s the best Google Analytics plugin, which makes it easy to see how users interact with your forms and where they tend to drop off, all from your WordPress dashboard.

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

If anything, you can also run an A/B split test. This means trying out different versions of your forms to see which one performs better.

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 without any coding and keeps your data safe.

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

We hope this article helped you show the confirm navigation popup for WordPress forms. You may also want to check out our expert picks of the best online form builders and our guide on how to add better custom notifications.

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.