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.
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.
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:
This php function simply adds a JavaScript file to the front-end of your website.
Go ahead and save this file asconfirm-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:
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:
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.
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.
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.
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.
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.