ContactForm7 add confirmでスクロール位置を調整＆戻るボタンやページ離脱を確認して防ぐ方法

2020年1月27日2020年4月20日ContactForm7カスタマイズ

2020年1月現在、以前に公開していたContactForm7 add confirmのカスタマイズが効かなくなっていることに気が付いたので新しい方法をご紹介します。

ContactForm7に確認画面を付けるときにまず選ばれるのがプラグインContactForm7 add confirmです。

ところがこのプラグイン、デフォルトでは色々と問題があります。

この記事では、スクロール位置の調整と戻るボタンや操作ミスでのページ移動を防ぐ方法をご紹介します。

その他にも、ヘッダーに書いたjQueryコードが確認画面で効かない！！！と焦っている人はこの方法を使いましょう。

ContactForm7 add confirmの確認画面にjQueryコードを書き足し＆カスタマイズする方法

フォームの動作のなかではjQueryでカスタマイズしたい部分が色々と出てきます。

ところが、一般的なヘッダーに書いたjQueryが、確認画面では機能しないんです……。

わたしはjQueryには詳しくないので理由は知りません！

色々カスタマイズしづらいContactForm7 add confirmを無理やりカスタマイズします。

ContactForm7の確認画面は、ページ遷移はしておらずjQueryを使って内容を変えて表示しています。

全部jQueryで出力されているので、その部分にカスタマイズを押し込まなければなりません。

カスタマイズのためのconfirm-custom.jsを作ってフッターで読み込むという方法を取ります。

その中に書き込んだjQueryなら、確認画面でも機能します。

スクロールのための関数を上書きしてカスタマイズを適用させる

まずはカスタマイズのためのJavaScriptファイルを作ります。

ContactForm7 add confirmが確認用フォームをスクロールして表示させるために使用している関数の中身を丸々書き換えることで、確認画面の表示と同時にjQueryを動作させます。

ContactForm7 add confirmのJavaScriptファイルから持ってきたコードをカスタマイズします。

テキストエディタに以下をコピペして、名前を付けて保存してください。

confirm-custom.js

var wpcf7c_scroll = function(unit_tag) {
	// エラーの時などにアンカーまでスクロール
	jQuery(jQuery.find("input[name=_wpcf7_unit_tag]")).each(function(){
		if(jQuery(this).val() == unit_tag) {
			var parent = jQuery(this).parents("form");
			var speed = 1000;
			var position = parent.offset().top;
			if(jQuery('.wpcf7c-anchor').length != 0) {
				position = jQuery('.wpcf7c-anchor').offset().top;
			}
			jQuery("html, body").animate({scrollTop:position}, speed, "swing");

		}
	});
}

ファイルができたら、使用しているテーマの中にjsというフォルダーを作り(すでにある人はその中に)、その中にアップロードします。

jQueryをフッターで読み込む

ContactForm7 add confirmのJavaScriptファイルはフッターで読み込まれているため、同じくカスタマイズ用のファイルもフッターで読み込みます。

functions.phpに以下を書き込みます。

//Java Scriptを読み込む
function load_enqueue_scripts() {
  wp_enqueue_script( 'confirm-custom', get_stylesheet_directory_uri() .'/js/confirm-custom.js' ,'', false, true);
}
add_action( 'wp_enqueue_scripts', 'load_enqueue_scripts' );

※他にもJavaScriptファイルを同じ方法(wp_enqueue_scripts)で読み込んでいる場合は同じ関数内にまとめましょう。

ContactForm7で正しい位置にスクロール＆離脱を防止するコピペ用コード

confirm-custom.js―戻るボタンは禁止＆ページ移動を確認

作ったJavaScriptファイルの中身にカスタマイズを加えたコードがこちらです。

var wpcf7c_scroll = function(unit_tag) {
//ここから戻るボタンの禁止
jQuery(function($){

     // 今いるページを履歴に追加
    history.pushState(null, null, null);
    // ページ戻り時にも今いるページを履歴に追加
    $(window).on("popstate", function(){
        history.pushState(null, null, null);
    // 確認ダイヤログを表示。不要な場合は削除
        alert('ブラウザの戻るボタンは使えません。\n編集しなおす場合は[入力内容を確認ボタン]から戻ってください。');
    });

  });
//ここまで戻るボタンの禁止
	// エラーの時などにアンカーまでスクロール
	jQuery(jQuery.find("input[name=_wpcf7_unit_tag]")).each(function(){
		if(jQuery(this).val() == unit_tag) {
			var parent = jQuery(this).parents("form");
			var speed = 1000;
			var position = parent.offset().top - 130; //★ページ上からの位置を調整
			if(jQuery('.wpcf7c-anchor').length != 0) {
				position = jQuery('.wpcf7c-anchor').offset().top - 130;　//★ページ上からの位置を調整
			}
			jQuery("html, body").animate({scrollTop:position}, speed, "swing");
 //ここからページ移動の確認
			jQuery(function($){
    			window.onbeforeunload = function(e) {
			    e.returnValue = "入力内容を送信せずにこのページから移動しますか？\n編集しなおす場合は[入力内容を確認ボタン]から戻ってください。";
			  }
			    $(window).on("popstate", function(e){
			    e.returnValue = "入力内容を送信せずにこのページから移動しますか？\n編集しなおす場合は[入力内容を確認ボタン]から戻ってください。";
			  });
			});
 //ここまでページ移動の確認
		}
	});
}

ContactForm7 add confirmの確認画面で移動を防ぐ方法解説

2行目辺りからある追加してあるコードと、下から5行目辺りまでに追加してあるコードでページ遷移による離脱を防いでいます。

文言はお好みに調整してください。(ページ移動の確認の方は、ブラウザによってはここで書いたものではなく典型文が表示されます。)

ContactForm7 add confirmの確認画面って、気付いていなかったのですがブラウザの戻るボタンを押すとフォームの前にいたページに戻ってしまうんです。

確認画面ってよく見ていないと「何が起きた！？」と混乱してしまったり、フォームが送信されたと思い込んでしまうなどして誤動作が起きやすい場面です。

確認画面から直接前のページに戻って編集しようとして戻るボタンを押す人も結構多いはず。

これで入力内容がパーになってしまっては離脱率はとんでもないことになりそうですよね。

戻るボタンを押した場合は、戻らずにアラートを表示。

メニュー等からそれ以外のページ移動をしようとした場合や、画面を閉じようとした場合には確認ダイヤログを表示します。

完璧に操作ミスによる離脱を防げているのではないでしょうか！！GOOD！！UI！！！！

ContactForm7 add confirmの確認画面でスクロール位置を調整する方法解説

確認画面に切り替わったときに、ページの一番上に自動的にスクロールしてくれる仕様になっています。

これが、ヘッダーをposition:fixedで固定している場合や、他の要素を上に配置している場合には表示される位置がズレてしまうことがあります。

その場合は、★ページ上からの位置を調整というコメントアウトが入っているところの数字を両方調整して、お好みの位置にしてください。

ビジネスサイトではフォームのUIが重要

ビジネスサイトではサイトを見てもらうことだけでなく、実際にお問合せをしてもらったり登録してもらったりすることがとても重要な機能ですよね。

それなのに、フォームの確認画面がわかりにくかったり、ちょっとした誤動作で入力内容がパーになって離脱してしまってはもったいない！！！

このひと手間はあとあとのサイト実績に大きく関わってくるはずです。