コメントを送信せずにページを閉じてしまったり、フォームが中途半端に入力されたままページを閉じてしまったりすると、非常にイライラするものです。最近、あるユーザーから、読者にナビゲーションの確認ポップアップを表示できないかという問い合わせがありました。
この小さなポップアップは、ユーザーに警告を発し、ユーザーが誤って中途半端な入力や未送信のフォームを残してしまうのを防ぎます。ユーザーエクスペリエンスを向上させ、訪問者がゼロから何かを始めなければならないのを防ぐ良い方法です。
しかし、この機能が正しく設定されていないと、ユーザーをイライラさせ、サイトを混乱させる可能性があります。このような問題を回避し、スムーズに機能を追加するには、信頼できる方法が必要です。
そこで、カスタマイザー・プラグインを使った方法をご紹介します。ご心配なく、思ったより簡単です！
この投稿では、WordPressのフォームにナビゲーション確認ポップアップを表示する方法を紹介します。
ナビゲーション確認ポップアップとは？なぜ必要なのか？
ユーザーがWordPressブログにコメントを書いているとしよう。すでに何行もコメントを書いていたのに、気が散ってコメントを送信するのを忘れてしまったとする。さて、もしブラウザーが閉じてしまったら、コメントする内容は消えてしまいます。
ナビゲーションを確認するポップアップは、コメントするチャンスを与える。
この機能はWordPressの投稿エディター画面で実際に表示されます。未保存の変更があり、ページを離れようとしたりブラウザーを閉じようとすると、警告ポップアップが表示されます。
ナビゲーション確認ポップアップを設定することで、ユーザーエクスペリエンス、コンバージョン率、ユーザーの信頼を向上させることができます。
その方法とはユーザーに警告機能を与えることで、ユーザーの体験を大切にしていることが伝わり、ロイヤルティや再訪問の促進につながります。ユーザーは、進行状況を失わないことが分かっていれば、フォームやコメントを記入する可能性が高くなります。
このことを念頭に置いて、WordPressのコメントやサイトの他のフォームにこの警告機能を追加する方法を紹介します。このガイドで説明することをすべて簡単に説明します：
準備はいいかい？始めよう
WordPressで未送信のフォームにナビゲーションの確認ポップアップを表示する
このチュートリアルでは、カスタム・プラグインを作成しますが、ご心配なく。このチュートリアルの最後にプラグインをダウンロードして、あなたのサイトにインストールすることもできます。
しかし、コードをよりよく理解するために、あなた自身のプラグインを作成してみてください。まずはローカルのインストーラまたはステージングサイトでこれを行うことができます。
まず、コンピューター上に新しいフォルダーを作成し、confirm-leavingと名付ける必要があります。confirm-leavingフォルダーの中に別のフォルダーを作り、jsと名付ける。
では、メモ帳のようなプレーン・テキストエディターを開き、新規ファイルを作成しよう。その中に以下のコードを貼り付ける：
[php]
<?php
/**
* Confirm Leaving
* Plugin Name: Confirm Leaving
* Plugin URI: https://www.wpbeginner.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: WPBeginner
* Author URI: https://www.wpbeginner.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
function wpb_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', 'wpb_confirm_leaving_js');
[/php]このPHP関数は、あなたのサイトのフロントエンドにJavaScriptファイルを追加するだけです。
confirm-leaving.phpをconfirm-leavingフォルダー内に保存してください。
次に、このプラグインが読み込むJavaScriptファイルを作成する必要があります。テキストエディターで新規ファイルを作成し、その中にこのコードを貼り付ければよい：
[javascript]
jQuery(document).ready(function($) {
$(document).ready(function() {
needToConfirm = false;
window.onbeforeunload = askConfirm;
});
function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Your unsaved data will be lost.";
}
}
$("#commentform").change(function() {
needToConfirm = true;
});
})
[/javascript]このJavaScriptコードは、ユーザーがコメントフォームに未保存の変更があるかどうかを検出します。ユーザーがページから移動しようとしたり、ウィンドウを閉じようとすると、警告ポップアップを表示します。
このファイルをjsフォルダー内にconfirm-leaving.jsとして保存します。
両方のファイルを保存すると、フォルダー構造はこのようになります：
次に、FTPクライアントを使用してWordPressサイトに接続する必要があります。ステップバイステップの手順については、FTPを使用してWordPressファイルをアップロードする方法のガイドを参照してください。
接続したら、サイトの/wp-contents/plugins/フォルダにconfirm-leavingフォルダをアップロードする必要があります。
その後、WordPressの管理エリアにログインし、「プラグイン」にアクセスしてください。
ここから、インストールされているプラグインのリストに「Confirm Leaving」プラグインが表示されるはずです。その下の「有効化」リンクをクリックしてください。
これですべてだ。これで、あなたのサイトの投稿日にアクセスし、コメントフォームの任意のフィールドにテキストを書き込み、送信せずにページを閉じてみることができます。
ポップアップが表示され、未保存の変更があるページを離れようとしていることを警告します。
WordPressサイトの他のフォームに警告ポップアップを追加する
同じコードベースを使って、WordPressサイトのあらゆるフォームをターゲットにすることができます。ここでは、お問い合わせフォームをターゲットにした例を紹介します。
この例ではWPFormsプラグインを使ってお問い合わせフォームを作成します。あなたのサイトで別のお問い合わせフォームプラグインを使用している場合でも手順は同じです。
まず最初にすることは、お問い合わせフォームを追加したページに行くことです。そして、お問い合わせフォームの最初のフィールドにマウスオーバーして右クリックし、ブラウザーメニューから「検査」を選択します。
ここから、ID属性を見つけるために<form>タグで始まる行を探します。この例では、フォームのIDはwpforms-form-170です。
タグを見つけたら、ID属性をコピーする。
では、confirm-leaving.jsファイルを編集して、#commentformの後にID属性を追加しましょう。フォームのIDを#commentformで区切ることを本当に〜してもよいですか？また、フォームのID属性のプレフィックスとして#記号を追加する必要があります。
コードはこのようになる：
[javascript]
jQuery(document).ready(function($) {
$(document).ready(function() {
needToConfirm = false;
window.onbeforeunload = askConfirm;
});
function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Your unsaved data will be lost.";
}
}
$("#commentform,#wpforms-form-170").change(function() {
needToConfirm = true;
});
})
[/javascript]問題がなければ、変更を保存し、ファイルをサイトにアップロードしてください。
これで、お問い合わせフォームの任意のフィールドに任意のテキストを入力し、フォームを送信せずにページを閉じようとすることができます。ポップアップが表示され、未保存の変更があることを警告します。
こちらから離脱確認プラグインをダウンロードし、通常通りプラグインをインストールして有効化してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法をご覧ください。
このプラグインはコメントフォームをターゲットにしていますが、ユーザー登録フォーム、アンケート、フィードバックフォーム、求人応募フォーム、その他のフォームをターゲットにプラグインを編集することができます。
ボーナスヒント: WordPressフォームのパフォーマンスを向上させる
ナビゲーションの確認ポップアップを追加したら、ユーザーがフォームを放棄する頻度を追跡することをお勧めします。
どれだけの人が最後まで読まずに離脱したかを知ることで、あなたのサイトがどの程度ユーザーに役立っているかを知ることができる。そうすることで、何が離脱の原因になっているのかを突き止め、改善することができます。
フォーム放棄のトラッキングに最適なツールのひとつがMonsterInsightsです。
Google アナリティクス プラグインは、WordPress ダッシュボードから、ユーザーがどのようにフォームにアクセスし、どこでドロップオフする傾向があるのかをすべて簡単に確認することができます。
詳しくは、フォームの放棄をトラッキングして減らす方法をご覧ください。
何かあれば、A/Bスプリットテストを実施することもできます。これは、異なるバージョンのフォームを試して、どちらがより良いパフォーマンスを示すかを確認することを意味します。
例えば、ナビゲーション確認ポップアップの文言を変更したり、フォームをカスタマイズしたりすることができます。結果を分析することで、何がユーザーを引き付け、離脱率を下げるのに役立つかを判断することができます。
Thrive Optimizeはこの作業に最適なプラグインです。コーディングなしでA/Bスプリットテストを実行でき、データを安全に保管できます。
さらに詳しく知りたい方は、WordPressでA/Bスプリットテストを行う方法についてのガイドをご参照ください。
この投稿が WordPress フォームのナビゲーション確認ポップアップの表示に役立てば幸いです。エキスパートが選ぶ最高のオンラインフォームビルダーや、より良いカスタマイザーを追加する方法についてのガイドもご覧ください。
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.
Igor
Tried to use your code in bbpress forum. Unfortunately no popup message appears after user dose not post his comment. Tried all variations of changing id in JS file but still nothing appears.
Bob Garrett
Further to my previous query I have now tried using the form’s parent div id and modified the code. This almost works but…
The text shown by the pop-up is not the text entered in the code.
Even if the form is completed and submit hit, then going to another page still results in the warning.
How can I resolve this?
Tom Kelley
Have tried this vvvvv to no avail. Working with Gravity Forms. All else works well, but the warning still comes up when hitting the submit button on a completed form. Any advice?
WPBeginner Support
Nov 27, 2016 at 6:52 am
Hi Bonnie,
We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.
Bonnie Ramthun
I’m still trying to figure out how to make sure the popup DOESN’T appear when the user presses the “Submit” button. The confirm leaving popup shouldn’t appear if the user has entered all the information required, but this code makes it pop up every time.
I would so appreciate the help, if there is a solution available.
Swayam Dhawan
I Need the same function when someone navigate from particular page in website and while click on stay , they must navigate to home page of the website.
waiting for the response.
Bonnie Ramthun
I am so happy for your wonderful confirm navigation code! I need it desperately because many of my clients users can’t get it through their head that they need to press the “Submit” button on the form.
The code works perfectly, except for one problem. When I press the “Submit” button on my WPForms form, the confirm navigation code pops up. I would like the “confirm navigation” to happen only when the user doesn’t press the “Submit” button. I can’t figure out how to do this. Can you help?
WPBeginner Support
Hi Bonnie,
We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.
管理者
Will C
I have two separate multi-page gravity forms on my site. When this plugin is active, I get a confirmation popup when clicking “Next Step” on one of the forms (undesired), but not the other. Are you aware of any issues with gravity forms and “window.onbeforeunload”? Thanks
Nipa Sarker
Having same issues with buddy press create group steps.
Nipa Sarker
I ma using the code for buddy-press multi step create group from.It is working fine except while clicking on the next step button or save button it is showing the same alert.
I ma using the form id “#create-group-form” instead of the #commentform
Luis Zarza
Hi, nice post!
It helped a lot. But your solution won’t work while logged in. It only works for users that fill in the form and are logged out. I need it also to work for logged in users, please!
Could you provide a solution for that?
Thanks.
Luis Zarza
Sorry, it does actually works when you create the plugin. At first I did it only throwing the JS to the page I wanted without creating the plugin, because I didn’t want the script to be loaded on all the pages of my site.
Alain Aubry
Hi
Contact Form 7 does not use an ID in their form, how can I make this work?
WPBeginner Support
Contact Form 7 uses an ID with all the forms. The line that contains form ID will look something like this:
1-click Use in WordPress
In this example, the form’s ID attribute is
wpcf7-f85-p11-o1. Hope this helps.管理者
Betty L Van Fossen
I have two problems. One I get these pop up in my mail all the time,q it’s aggravating. I’m 89 in yrs.therefore a little short on patience and I start using my pointer to fast hitting other things, so I get myself in lots of problems. Two –guess(I know) I have to many cookies they say. What are the cookies –how do I eleminate them? What do you mean subscribe without commenting. I prefer the e-mail. O.K..to personal and meaningful conversation.
Betty L Van Fossen
Does Pop Ups work the same for e-mail as WordPress for removing?
WPBeginner Support
We are not sure what you mean. Can you please explain?
管理者
Betty L Van Fossen
Safari said I could not get in cause I had to many cookies. In the meantime I was on my e-mail and the pop ups came on, while on my e-mail they are always popping up. I got on google and asked for help on cookies and pop ups and gave me lots to choose from. Now word press got in here, what is word press. I’m not going to write a book,just NEED HELP. Answer by e-mail. I’m turning you off now I’m really tired now.
Betty L Van Fossen
I will wait for your reply in my e-mail as I’m tired so will turn off now.