What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add a Confirm Navigation Popup to WordPress Forms

How to Add a Confirm Navigation Popup to WordPress Forms

It’s not rare to see the case that someone gets distracted when filling out a comment/contact form and then closes the window accidentally without submitting the form. In such a case, the person has to re-open the form and re-fill it. However, instead of doing so, he/she might not bother to come back to finish the form.

If this happens on your site, you should have noticed that most of the people who have moved away would simply leave, which means you may suffer a loss of comments and contacts. But fortunately, there is a simple solution that saves your visitors from the annoying situation and helps you ensure a good user experience. The solution, then, is to add a confirm navigation popup to your forms.

What Is a Confirm Navigation Popup?

A confirm navigation popup is a small dialog box that pops up when you are about to close a page with unsaved changes. This popup alerts you, and reminds you to complete the content before leaving.

A good example is the confirmation popup in the built-in post editor in WordPress. If you close the editing page or the entire browser without saving the changes you have made, a popup will appear to give you a second chance to stay on the page and deal with the unsaved content.

Confirm Navigation Popup in WordPress Post Editor

In below, we will discuss how to add the warning popup to the unsubmitted comment form, contact form or any other form on your WordPress site.

Create a Confirm Navigation Popup Plugin

For WordPress sites, most of the functionality you want can be added with the use of the proper plugins. However, if you have searched in the plugin directory on WordPress.org, you should have found that there is no plugin available for you to add a confirm navigation popup to forms.

The good news is that you don’t have to be upset about this because you can create a plugin on your own. The entire process is easy, and as long as you follow this tutorial closely, you are able to get everything done in minutes only.

Create the needed folders

To make a custom plugin, you first need to create a folder on the local PC. You can name the folder as anything that can be easily identified, and for our example, we use “confirm-navigation”. In this newly created folder, you also have to create a subfolder and name it to be “js”.

Prepare the plugin files

Now it comes to the most important part – to create the files that are needed to make the plugin function. Altogether, two files are required: a JavaScript file, and a PHP file that adds the JavaScript file to your WordPress site’s frontend.

To get started, open Notepad or any other text editor you use, add the code below to it, and then save the file as “confirm-navigation.php”. This PHP file should be placed in the main folder of “confirm-navigation”.

Create the PHP File

As soon as these are done, create a new file with your text editor and add this code to it.

Create the JavaScript File

The code above will detect whether there is unsaved data in the comment form. If unsaved changes are detected, your site visitors will be prompted the confirm navigation popup when they try to close the screen or navigate to another page.

The example above, however, only works for the built-in comment form in WordPress. If you want to target any other form, you can make a change to the code by adding the form ID in it.

No matter which form plugin you have used to build your order form, contact form, etc, you can find the form ID by:

  1. Opening the page that the form is on.
  2. Hovering your mouse over the beginning or first field of the form.
  3. Right-clicking and selecting “Inspect”.
  4. Finding the line starting with <form>, and locating the ID of the form.

Find the Form ID

Then, copy the ID and add it after the “#commentform”. Remember to separate them apart with a comma. Also, you have to add a “#” sign before the form ID. After the modification, this line of code will be like this.

Add More Forms

Now, you can add more form IDs in the same way.

After all forms are added to the code, save the file with the name “confirm-navigation.js”, and put it inside the “js” subfolder instead of the main folder.

Up to now, you have got both files ready.

Make Use of the Plugin

To start using the plugin, you first need to connect to your WordPress site through FTP or the cPanel File Manager, and then upload the “confirm-navigation” folder to /wp-content/plugins/.

Note: to prevent unexpected errors, we suggest you upload the plugin to a WordPress staging site first for testing, and then use it on your production site.

Upload Plugin

Now log into your WordPress site and go to “Plugins”. In the plugin list, you will find a new plugin installed which is named Confirm Navigation. Simply click on the “Activate” link to get the plugin working.

Activate Confirm Navigation Plugin

After the activation, you can edit any form that has been added to the plugin and try to close the window with unsaved content. A confirm navigation popup will appear certainly.

Confirm Navigation Popup

Author

Joyce is a professional writer & SEOer who loves trying new things and sharing the experience through blogging. She loves clean design, playing with different WordPress themes, SEO, etc. Now she is very struggle with purchasing a bubbling apartment in downtown. You can help her by clicking our ADs or making a purchase via our links ;-)

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *