How to Show Confirm Navigation Popup for Forms in WordPress97

What is confirm navigation popup?

In simple confirm navigation popup is a popup that appears on your browser when you have unsaved changes.

Show confirm navigation popup for unsubmitted forms in WordPress

To show confirm navigation popup for unsubmitted forms in WordPress, follow the steps below:

  • Create a folder and name it confirm-leaving, inside this folder create another folder and name it js.
  • Open a notepad or any other plain text editor inside the confirm-leaving folder, paste the code given below inside the notepad and save it as confirm-leaving.php:
<?php

/**

 * Confirm Leaving

 * Plugin Name: Confirm Leaving

 * Plugin URI:  http://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:  http://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');

(note: This code adds JavaScript to the front-end of your website.)

  • Create a notepad folder inside js folder, paste the code below and save it as confirm-leaving.js
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;

});

 

 })

(note: this code detects unsaved changes and if user tries to close the window, it will show a warning popup)

  • Your folder structure should look like picture shown below:

applications

  • Connect to your site using FTP client and upload the folder confirm-leaving to /wp-contents/plugins/ folder on your website
  • Login to WordPress Admin area, go to plugins and activate ‘confirm leaving’ plugin from the list.

 

Adding the warning to other forms in WordPress

Here, we will use our code to target a contact form (if you have unsaved changes in contact form, it will show popup).

To start the guide to show warning in unsaved form, follow the steps below:

  • Go to the contact form of the website, right click anywhere on the website and select inspect element as shown in the picture below:

name

  • Search for line that starts with <form> tag and find ID attribute over there. The above example has form’s ID ‘wpforms-form-170’.
  • Copy the ID attribute, now edit confirm-leaving.js file and add this ID attribute after %commentform.

(note: separate %commentform and form’s ID with comma. Also add # sign as prefix to form’s ID attribute)

  • Now your code should be:
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;

});

 

 })
  • Save changes and upload it to your website. You should now be able to see popup when you have unsaved changes in your form.