How to Show a Confirm Navigation Popup for Forms in WordPress (2023 Guide)
Have you ever been filling out a long form on a website, got distracted and accidentally navigated away from the page, then lost all your progress? It‘s a frustrating experience that negatively impacts usability.
As a website owner, you can prevent this and improve the user experience on your WordPress forms by implementing a confirm navigation popup. Also known as a "are you sure you want to leave this page?" popup, it alerts users who try to leave the page with unsaved form changes.
In this guide, we‘ll walk you through why confirm navigation popups are useful and how you can easily add this functionality to forms on your WordPress website, either by creating a custom plugin or downloading our free plugin.
What is a Confirm Navigation Popup?
A confirm navigation popup is an alert dialog box that appears when a user tries to navigate away from a page with unsaved changes in a form. It warns the user that their inputs will be lost if they leave and allows them to choose to stay on the page or proceed with leaving.
Here‘s an example of what a confirm navigation popup looks like:
[Insert image example]The message is fully customizable, but typically says something like "Are you sure you want to leave this page? Your unsaved changes will be lost." The user can then click "Leave" to exit or "Stay" to remain on the page and finish the form.
Why Use a Confirm Navigation Popup?
Implementing a confirm navigation popup on your web forms provides several key benefits:
- Prevents losing unsaved user inputs and progress accidentally
- Improves the user experience by proactively warning before data loss
- Reduces form abandonment rates by encouraging form completion
- Shows attention to detail and care for your website visitors
While it‘s a relatively small feature, a confirm navigation popup goes a long way in making your forms more user-friendly. Your visitors will appreciate the extra safety net and it reflects positively on your brand.
How to Add Confirm Navigation to WordPress Comment Forms
The default WordPress comment form could especially benefit from a confirm navigation popup, since users often write lengthy, well-thought-out comments.
To add this functionality, we‘ll create a small custom plugin. Don‘t worry – we‘ll provide the exact code needed and explain each part for you.
Step 1: Create a new folder on your computer and name it "confirm-navigation". Inside that folder, create a sub-folder called "js".
Step 2: Open a text editor (like Notepad) and paste the following PHP code:
<?php
/**
* Plugin Name: Confirm Navigation for Comments
* Plugin URI: https://yourwebsite.com
* Description: Shows a confirmation popup when user tries to navigate away from the comment form with unsaved changes.
* Version: 1.0
* Author: Your Name
* Author URI: https://yourwebsite.com
*/
function confirm_navigation_scripts() {
wp_enqueue_script(
‘confirm-navigation‘,
plugins_url( ‘js/confirm-navigation.js‘, __FILE__ ),
array(‘jquery‘),
‘1.0‘,
true
);
}
add_action(‘wp_enqueue_scripts‘, ‘confirm_navigation_scripts‘);Save this file as confirm-navigation.php in your main "confirm-navigation" directory.
This PHP code registers a new WordPress plugin and enqueues a JavaScript file that we‘ll create next.
Step 3: Create a new file in your text editor and paste the following JavaScript code:
jQuery(document).ready(function($) {
let unsavedChanges = false;
$(‘#commentform‘).on(‘change keyup‘, ‘textarea, input‘, function() {
unsavedChanges = true;
});
$(‘#commentform‘).on(‘submit‘, function() {
unsavedChanges = false;
});
window.addEventListener(‘beforeunload‘, function(e) {
if (unsavedChanges) {
e.preventDefault();
e.returnValue = ‘‘;
return ‘‘;
}
});
});Save this file as confirm-navigation.js in the "js" directory you created.
This JavaScript uses jQuery to detect when changes are made in the comment form fields and sets a variable unsavedChanges to true. If the form is successfully submitted, it sets unsavedChanges back to false.
The script then uses the beforeunload event to detect when the user tries to leave the page. If unsavedChanges is true, it shows the confirm navigation popup.
Step 4: Upload the entire "confirm-navigation" folder to your WordPress plugins directory via FTP or through the WordPress admin by going to Plugins → Add New → Upload Plugin.
Step 5: Go to the WordPress admin Plugins page and find "Confirm Navigation for Comments" in the list. Click "Activate".
You‘re done! The confirm navigation popup will now appear on the comment form if a user tries to navigate away with unsaved form changes.
Extending to Other WordPress Forms
What if you want to implement a confirm navigation popup on other forms on your WordPress site, like a contact form?
With a few small tweaks, you can modify our plugin to target any form.
Step 1: Install and activate the confirm navigation plugin using the steps from the previous section.
Step 2: Identify the CSS selector for the form you want to target. An easy way to do this is to right-click on the form in the browser and choose "Inspect Element". Look for an ID or class on the <form> tag.
For example, here‘s the HTML for a contact form using the WPForms plugin:
<form id="wpforms-form-1085" class="wpforms-validate wpforms-form" ...>We can target this form using the ID "#wpforms-form-1085".
Step 3: Edit the confirm-navigation.js file in your plugin‘s "js" directory. Find the line that begins with "$(‘#commentform‘).on(‘change keyup‘" and replace "#commentform" with the CSS selector you found in Step 2.
For example:
$(‘#wpforms-form-1085‘).on(‘change keyup‘, ‘textarea, input‘, function() {
unsavedChanges = true;
});
$(‘#wpforms-form-1085‘).on(‘submit‘, function() {
unsavedChanges = false;
});Do this for both the "change keyup" and "submit" event listeners. Make sure to match the selector exactly.
Step 4: Save the JavaScript file and re-upload it to your WordPress site, overwriting the old version.
The confirm navigation popup will now appear on your other form if a user tries to leave the page with unsaved changes!
You can repeat steps 2-4 for any other form on your WordPress site. Just make sure each form has a unique CSS selector.
Download the Plugin
You can download the complete confirm navigation WordPress plugin from this link:
[Insert link]The plugin by default targets the comment form, but you can use the steps in the previous section to modify it to work with other forms.
Enjoy Adding Confirm Navigation to Your WordPress Forms
A confirm navigation popup is a small but thoughtful addition to your WordPress forms that improves the user experience by preventing accidental data loss.
With the steps outlined in this guide, you can easily create a custom WordPress plugin to enable confirm navigation on your comment form, contact form, and other forms across your website.
If you found this guide helpful, you may also want to check out our other resources:
- [Beginner‘s Guide to WordPress] – A complete introduction to using WordPress
- [X Essential WordPress Plugins] – Our picks for must-have WordPress plugins for any site
- [WordPress Security Best Practices] – Tips for keeping your WordPress site secure
If you have any other questions about WordPress or need help with your website, feel free to contact us. Our team of WordPress experts is always happy to assist!
