Accidentally closing a page without submitting your half-filled form is annoying. Recently, one of our users asked us if it was possible to display a pop-up window that confirms user action on forms? This tiny little alert users and prevents them from accidentally closing pages with half-filled forms.

In this tutorial, we will show you how to display a close action confirmation window for your forms. WordPress blog.

What is a browsing confirmation popup

Suppose a user is writing a comment on your blog. he's already written lots of lines, but they get distracted and forget to submit the comment. Now, by clicking on a link for example, all the content that he has started to write will be lost.

The browsing confirmation gives them a chance to complete their comment.

You can see this feature from the article / page editor interface. If you have any unsaved changes, and you try to exit the page or close the browser, then you will see a pop-up warning.

Let's see how we can add this warning feature on WordPress comments and other forms on your blog.

How to display a confirmation popup on unsubmitted forms in WordPress

For this tutorial, we will create a custom plugin. We have already shown you how to create a WordPress Plugin quickly.

Let's start.

First you need to create a new folder on your computer and name it "confirm-action". In this folder you need to create another folder and name it js.

Now open a text editor like Notepad and create a new file. Inside, just paste the following code:

<?php
/**
 * Confirm Action
 * Plugin Name: Confirm Action
 * Plugin URI: https://blogpascher.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: YourNAME
 * Author URI: https://blogpascher.com
 * License: GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function bpc_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', 'bpc_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-action.php" in the file " confirm action "(Root of your plugin).

Now we need to create the JavaScript file that this plugin will load. Create a new file and paste this code inside:

JQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm; }}} $ Change (function () {needToConfirm = true;});})

Rename this file confirm-leaving.js", Move it to the" subfolder " js »From« confirm action"

This JavaScript code detects if the user has unsaved changes in the comments form. If the user tries to exit the page, they will display a pop-up warning.

All you have to do now is upload your file to your server using your client FTP favorites. After that, all you have to do is activate the plugin from your dashboard.

That's all. You can now visit an article on your website, try to write a comment then click on a link, you will notice a popup similar to this one.

Addition of the warning on other WordPress forms

You can use the same code to target all forms on your WordPress site. Here we will show you an example on a Contact form.

In this example, we use the plugin WPForms to create a Contact form. The instructions will be the same if you use another Plugin for contact form on your website.

Go to the page where you added your Contact form. Move the mouse over the first field in your contact form, right-click, then select “ Inspect“, To access the source code.

Locate the line that begins with the tag <form>. In the form tag you will find the ID attribute. In this example, the ID of our form is formulaire . You must copy the ID attribute.

Now, edit the confirmer-leaving.js file and add the ID attribute after " #commentform Separated by a comma.

Your code should look like this:

JQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm; Custom () function () (needToConfirm = true;});})

Save your changes and Install your plugin on your WordPress blog.

That's it for this tutorial. Hope it helps you add pop up confirmation window to your blog. Do not hesitate to ask questions if you do not understand a point.