登録フォームやページからの移動を確認／戻るボタンを禁止する方法
登録フォームやお問合せなど、ユーザーが入力するページにおいて誤動作やページの不具合によって入力した内容が消えてしまうのは腹立たしいものですよね。
複数ページに渡るフォームでブラウザの戻るボタンを使うと「フォーム再送信の警告」が出てしまって、入力内容がパーなんてことも。
ブラウザの動作で「移動・戻る・閉じる」をして欲しくない場合に「無効・禁止・確認」していく、３種類の対策をご紹介します。
ブラウザの戻るボタンを無効・禁止にする方法
$_POSTなどを使っていてユーザーが入力したデータを引き継いでページ移動する場合には、ブラウザの戻るボタンを使用すると「フォーム再送信の警告」が出てしまいます。
更新ボタンを押せばいいのですが、スマホのブラウザでは更新ボタンが見つからない……。
ちょっとびっくりしてもう一度戻るボタンを連打したら、意図しないページまで戻ってしまった……。
なんてことはよくあるもの。
こうなってしまっては困る場合には、ブラウザの戻るボタンの動作を制御して、使えなくしてしまいましょう！
ヘッダーに、WordPressではheader.phpに次のコードを入力します。
<script type="text/javascript">
jQuery(function($){
//↑WordPressで使う場合はこれで囲む↑
// 今いるページを履歴に追加
history.pushState(null, null, null);
// ページ戻り時にも今いるページを履歴に追加
$(window).on("popstate", function(){
history.pushState(null, null, null);
// 確認ダイヤログを表示。不要な場合は削除
alert('ブラウザの戻るボタンは使えません。\nページ内の前へ戻るボタンから戻ってください。');
});
//↓WordPressで使う場合はこれで囲む↓
});
</script>このコードでは同ページの一番上に移動し、OKを押すと消すことのできる確認ダイヤログを表示します。
alertの一文を削除すると、何も表示せずに戻るボタンが使えない状態になります。
フォーム再送信の警告を出さないようにする方法として使えます。
ページ読み込みが終了する前に戻るボタンを押してしまうとうまく動作しないことが多いので、完全に防げるわけではないですが……
ページからの移動・閉じる際に確認ダイヤログを表示する方法
戻るボタンを押したときだけでなく、リンクをクリックしたときやページを閉じようとしたときにポップアップが表示されるように設定します。
「本当にページを移動しますか？」
「このサイトを離れますか？行った変更が保存されない可能性があります」
よく見るブラウザの確認ダイアログで、誤動作を防ぎます。
ヘッダーに、WordPressではheader.phpに次のコードを入力します。
<script type="text/javascript">
jQuery(function($){
//↑WordPressで使う場合はこれで囲む↑
window.onbeforeunload = function(e) {
e.returnValue = "入力内容は保存されません。このページから移動してもよろしいですか？";
}
$(window).on("popstate", function(e){
e.returnValue = "入力内容は保存されません。このページから移動してもよろしいですか？";
});
//↓WordPressで使う場合はこれで囲む↓
});
</script>文章の内容は、そのまま表示できるブラウザと決まった文言でしか表示できないブラウザがあります。あしからず。
この方法を使った場合、ページから移動しようとした場合にはすべて確認ダイヤログが表示されてしまいます。
送信ボタンや、移動しても構わないリンク先などがある場合には、この確認を防ぐための属性onclick="window.onbeforeunload = null;"を追加します。
<input type="submit" onclick="window.onbeforeunload = null;">
<a href="/" onclick="window.onbeforeunload = null;">リンクの場合</a>特定のページや投稿タイプでのみ適用させる方法
サイト内すべてで戻るボタンを禁止していたらとても不便ですよね。
大抵は何かしらの理由がある部分のみになると思います。
わたしはボタンの選択内容($_POSTのデータを使用)によって内容が切り替わるページを作った際に使用しました。
WordPressの条件分岐タグでjQueryのコードを出し分けましょう。
ページIDで条件分岐
デベロッパーツールで<body class="page-id-xxx">についているクラス名を見るとページIDがわかります。
または、ダッシュボードの固定ページや投稿の一覧で特定のタイトルをホバーすると、画面下方のURLからIDがわかります。
<?php if(is_page(array(aaa,bbb,ccc,xxx))){ ?>
<!-- ここに上記のコードを入れる -->
<?php } ?>投稿タイプで条件分岐
特定の投稿タイプでのみ戻るボタンを禁止することも出来ます。
<?php if (is_post_type_archive('post') || get_post_type() === 'post' || strstr($url,'post')==true){ ?>
<!-- ここに上記のコードを入れる -->
<?php } ?>その他の条件分岐もできる
紹介した方法をConfactForm7 add confirmの確認画面でも使う場合はコチラ
https://saya-to.com/wordpress-site/contactform7-customize/co...ユーザーの誤動作もフォローする
カスタマイズしているとサイトの機能にばかり目が向いてしまいがちですが、良いサイトでもユーザーが誤操作してしまうことはありえます。
自分のミスで思い通りにいかなかったときは余計にイライラするもの。
そんなときにユーザーが困らないような設定をしておくことで、ワンランク上のUXを提供することができますね！
さやに相談してみる
自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい！というとき
お気軽にご相談ください！
記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応！
ご利用ガイド