Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Show Confirm Navigation Popup for Forms in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Accidentally closing a page without submitting your comment or with a half-filled form is annoying. 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 user experience and prevent visitors from having to start something from scratch.

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

Confirm navigation popup when user leaves a form unsubmitted

What Is a Confirm Navigation Popup?

Let’s suppose a user is writing a comment on your 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.

You can see this feature in action in the WordPress post editor screen. If you have unsaved changes and you try to leave the page or close the browser, then you will see a warning popup.

Unsaved changes warning popup in WordPress post editor

Let’s see how we can add this warning feature to WordPress comments and other forms on your site:

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 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 on a local install or a staging site first.

Let’s get started.

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

Now 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');
[/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.

Create a new file 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;
});

 })
[/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 need 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:

Plugin file structure

Now, you need to connect to your WordPress site using an FTP client. See our guide on how to use FTP to upload WordPress files.

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

Uploading plugin files to your WordPress site

After that, you need to log in to the WordPress admin area and visit the Plugin’s page.

Locate the ‘Confirm Leaving’ plugin in the list of installed plugins and click on the ‘activate’ link below it.

Activate plugin

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.

popup notification warning user about unsaved changes

Adding the Warning to Other Forms in WordPress

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 are using a different contact form plugin on your website.

Go to the page where you have added your contact form. Take the mouse over to the first field in your contact form, right-click, and then select ‘Inspect’ from the browser menu.

Finding form ID

Locate the line that starts with the <form> tag. In the form tag, you will find the ID attribute.

In this example, our form’s ID is wpforms-form-170. You need to copy the ID attribute.

Now edit the confirm-leaving.js file and add the ID attribute after #commentform.

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;
});

 })
[/javascript]

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. It only targets the comment form, but feel free to edit the plugin to target other forms.

That’s all; we hope this article helped you show the confirm navigation popup for WordPress forms. You may also want to check out our must have WordPress plugins and tools for business sites or read our ultimate guide on how to increase your blog traffic.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

20 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Igor says

    Tried to use your code in bbpress forum. Unfortunately no popup message appears after user dose not post his comment. Tried all variations of changing id in JS file but still nothing appears.

  3. Bob Garrett says

    Further to my previous query I have now tried using the form’s parent div id and modified the code. This almost works but…

    The text shown by the pop-up is not the text entered in the code.

    Even if the form is completed and submit hit, then going to another page still results in the warning.

    How can I resolve this?

  4. Tom Kelley says

    Have tried this vvvvv to no avail. Working with Gravity Forms. All else works well, but the warning still comes up when hitting the submit button on a completed form. Any advice?

    WPBeginner Support
    Nov 27, 2016 at 6:52 am

    Hi Bonnie,

    We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.

    • Bonnie Ramthun says

      I’m still trying to figure out how to make sure the popup DOESN’T appear when the user presses the “Submit” button. The confirm leaving popup shouldn’t appear if the user has entered all the information required, but this code makes it pop up every time.

      I would so appreciate the help, if there is a solution available.

  5. Swayam Dhawan says

    I Need the same function when someone navigate from particular page in website and while click on stay , they must navigate to home page of the website.

    waiting for the response.

  6. Bonnie Ramthun says

    I am so happy for your wonderful confirm navigation code! I need it desperately because many of my clients users can’t get it through their head that they need to press the “Submit” button on the form.

    The code works perfectly, except for one problem. When I press the “Submit” button on my WPForms form, the confirm navigation code pops up. I would like the “confirm navigation” to happen only when the user doesn’t press the “Submit” button. I can’t figure out how to do this. Can you help?

    • WPBeginner Support says

      Hi Bonnie,

      We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.

      Admin

  7. Will C says

    I have two separate multi-page gravity forms on my site. When this plugin is active, I get a confirmation popup when clicking “Next Step” on one of the forms (undesired), but not the other. Are you aware of any issues with gravity forms and “window.onbeforeunload”? Thanks

      • Nipa Sarker says

        I ma using the code for buddy-press multi step create group from.It is working fine except while clicking on the next step button or save button it is showing the same alert.
        I ma using the form id “#create-group-form” instead of the #commentform

  8. Luis Zarza says

    Hi, nice post!

    It helped a lot. But your solution won’t work while logged in. It only works for users that fill in the form and are logged out. I need it also to work for logged in users, please!
    Could you provide a solution for that?

    Thanks.

    • Luis Zarza says

      Sorry, it does actually works when you create the plugin. At first I did it only throwing the JS to the page I wanted without creating the plugin, because I didn’t want the script to be loaded on all the pages of my site.

    • WPBeginner Support says

      Contact Form 7 uses an ID with all the forms. The line that contains form ID will look something like this:

      <div role="form" class="wpcf7" id="wpcf7-f85-p11-o1" lang="en-US" dir="ltr">
      

      In this example, the form’s ID attribute is wpcf7-f85-p11-o1. Hope this helps.

      Admin

  9. Betty L Van Fossen says

    I have two problems. One I get these pop up in my mail all the time,q it’s aggravating. I’m 89 in yrs.therefore a little short on patience and I start using my pointer to fast hitting other things, so I get myself in lots of problems. Two –guess(I know) I have to many cookies they say. What are the cookies –how do I eleminate them? What do you mean subscribe without commenting. I prefer the e-mail. O.K..to personal and meaningful conversation.

        • Betty L Van Fossen says

          Safari said I could not get in cause I had to many cookies. In the meantime I was on my e-mail and the pop ups came on, while on my e-mail they are always popping up. I got on google and asked for help on cookies and pop ups and gave me lots to choose from. Now word press got in here, what is word press. I’m not going to write a book,just NEED HELP. Answer by e-mail. I’m turning you off now I’m really tired now.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.