How to Show Confirm Navigation Popup for Forms in WordPress

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 alert users and prevent them from accidentally leaving half filled and unsubmitted form. 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 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 comment. Now if they closed 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 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
/**
 * 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'); 

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

Go ahead and 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.

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

 })

This JavaScript code detects if user has unsaved changes in 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 folder to /wp-contents/plugins/ folder on your website.

Uploading plugin files to your WordPress site

After that you need to login to the WordPress admin area and visit Plugins page. Locate the ‘Confirm Leaving’ plugin in the list of installed plugins and click on ‘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 would 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 and your form’s ID with a comma. You will also need to add # sign as prefix to your form’s ID attribute.

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

 })

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 confirm navigation popup for WordPress forms. You may also want to try your hands on these 8 best jQuery tutorials for WordPress beginners.

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.

Read Original Article Here

Be the first to comment

Leave a Reply

Your email address will not be published.


*