問い合わせフォームに確認画面を付けたい理由がさっぱり分らないけど、おそらくコレって他がそうしているからというくだらない理由。
問い合わせを増やしたくないンだろうね。
まあ、それでも付けたいと言う人がいるのでこのプラグインで対応はしている。
ただ、いかんせん古いプラグインで
このプラグインは、WordPressの最新の3つのメジャーリリースでテストされていません。WordPressの最新バージョンで使用すると、保守やサポートが行われなくなり、互換性の問題が発生する可能性があります。
こんな警告が画面にも出ている。
まあ、大本の開発した配布元の会社のHPが永遠とメンテナンス中になっている印象。
この会社ですね。
まあ、それは良いとして、動作はいまの所問題なくしているので、実際には使い勝手の面で手を入れたくなる部分についてお伝えしていきます。
１. 固定ヘッダーにしている時に確認の上部位置がヘッダーによって隠れる
これが一番の問題でスティッキーヘッダーってもう、一般的な表示のされ方になっているので確認画面に遷移すると、スティッキーヘッダーに隠れて見えなくなってしまうのでどうにも中途半端な位置に移動しているように見えてしまう。
だから、CSSで対処するなら
form.wpcf7-form{
margin-top: -100px;
padding-top: 100px;
}となります。
まあ、これはこれで対応としていいのだけど、本来はscriptに対して対応必要だよな～と思うのでそのやり方も載せておく
参考にしたのはこのサイト
ContactForm7 add confirmでスクロール位置を調整＆戻るボタンやページ離脱を確認して防ぐ方法
確かにこの方法なら十全でしょう。
記載にあるとおり、JQueryで確認画面を表示しているので、これをカスタマイズする必要がある。
やり方としてはContactForm7 add confirmのJavaScriptファイルから持ってきたコードをカスタマイズすることになります。
ContactForm7 add confirmのなかにある /contact-form-7-add-confirm/includes/js/ ないのscripts.jsに163行目からの
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");
}
});
}を取得してこれをconfirm-custom.jsなどといったファイル名でjpファイルを作りテーマにアップして下さい。
jQueryを読み込む
ContactForm7 add confirmのJavaScriptファイルはフッターで読み込まれているため、同じくカスタマイズ用のファイルもフッターで読み込みます。
//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' );上記を子テーマのfunction.phpなどに適切に追加しましょう。
これは子テーマの場合なので親テーマの場合は、当りませんが、親テーマは更新などもあるので、オリジナルのテーマでない限りは子テーマで対応しましょう。
※他にもJavaScriptファイルを同じ方法(wp_enqueue_scripts)で読み込んでいる場合は同じ関数内にまとめた方が良いですが、他にJSを読み込んでいる場合は、そちらに追加してもいいでしょう。
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ないのコードなのでそれをカスタマイズしていきます
ContactForm7 add confirmの確認画面で移動を防ぐ方法解説
2行目辺りからある追加してあるコードと、下から5行目辺りまでに追加してあるコードでページ遷移による離脱を防いでいます。
//ここから戻るボタンの禁止
jQuery(function($){
// 今いるページを履歴に追加
history.pushState(null, null, null);
// ページ戻り時にも今いるページを履歴に追加
$(window).on("popstate", function(){
history.pushState(null, null, null);
// 確認ダイヤログを表示。不要な場合は削除
alert('ブラウザの戻るボタンは使えません。\n編集しなおす場合は[入力内容を確認ボタン]から戻ってください。');
});
});コメントアウトしている箇所は文言はお好みに調整してください。(ページ移動の確認は、ブラウザによってはここで書いたものではなく典型文が表示されます。)
alert('ブラウザの戻るボタンは使えません。\n編集しなおす場合は[入力内容を確認ボタン]から戻ってください。');ContactForm7 add confirmの確認画面って、気付かなかったのですがブラウザの戻るボタンやマウスの戻るを押すとフォームが入力前に戻ってしまいます。
確認画面はよく見ていないと「何が起きた！？」と混乱してしまったり、フォームが送信されたと思い込んでしまうなどして誤動作が起きやすい場面ですね。だから、フォームに確認画面っていらないと思う次第。
ただ、クライアントが付けたいといったら付けてあげるしかないので、確認画面から直接前のページに戻って編集しようとして戻るボタンを押す人も結構多いことを考慮してこれで入力内容がパーになってしまっては離脱率はとんでもないことになりそうですから対応をするとより良いUXの改善になるかと。
戻るボタンを押した場合は、戻らずにまずアラートを表示します。
メニュー等からそれ以外のページ移動をしようとした場合や、画面を閉じようとした場合には確認ダイヤログを表示します。
これで遷移防止措置は完璧ですね。
ContactForm7 add confirmの確認画面でスクロール位置を調整する方法
確認画面に切り替わったときに、ページの一番上に自動的にスクロールしてくれる仕様になっています。
これが、ヘッダーをposition:fixedで固定している場合や、他の要素を上に配置している場合には表示される位置がズレてしまうことがあります。
// エラーの時などにアンカーまでスクロール
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");その場合は、★ページ上からの位置を調整というコメントアウトが入っているところの数字を両方調整して、お好みの位置にしてください。
