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:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s