【情報追加しました】WordPressのお問い合わせフォームにページ離脱アラートを動作させたい

Question

https://fukuro-press.com/unload-alert-in-wordpress/
こちらの記事を参考に、WordPressのプラグインContactform7をカスタマイズしたお問い合わせフォームに、ページ離脱のアラートを問い合わせページにのみ動作するように作業中です。

記事ではプラグインを入れていましたが、コンタクトフォームのテキスト内に<script>を書いて作業をしています。

「ページ離脱アラートを表示するには」の章の

jQuery(function(){
  jQuery(window).on('beforeunload', function(){
    return "";
  });
});

こちらを入れた際には思った通り動くのですが、
「入力途中の離脱でアラートを表示するには」の章の

jQuery(function(){
  var isChanged = false;
  jQuery(window).on('beforeunload', function(){
    if(isChanged){
      return "";
    }
  });
  jQuery("form input, form textarea, form select").change(function(){
    isChanged = true;
  });
  jQuery("button[type=submit]").on("click", function(){
    isChanged = false;
  });
});

これに置き換えてしまうと動作しなくなってしまいます。
原因として何が考えられるでしょうか？？

添付画像にあるように、実装しているコードにはformタグやbuttonタグがないためここを置き換える必要がある気がするのですが、適切な置き換え方法がわからず苦戦しています。

すでに回答いただいた２名の方の方法も試したのですが解決せず、どなたかご教示いただけないでしょうか。
WordPressもjQueryもあまり詳しくないため解決できないでいます。
初心者の質問で恐縮ですが、何卒宜しくお願いいたします。

Answer 1

wordpressのコンタクトフォームテキスト欄で無駄に改行していたことが原因でした＞＜
お騒がせしてすみませんでした！

Answer 2

jQuery("form input, form textarea, form select").change(function(){
    isChanged = true;
});

の中身が本当に走ってるのか確認した方がいいでしょうね

ajaxでフォームを表示してるとかのタイプのコンタクトフォームだと
jQuery(function($){...});が走った時点ではformが存在せずに
イベントリスナー登録に失敗しているでしょうし

その辺りが原因であればまあ

jQuery("body").on("change","form input, form textarea, form select",function(){
　　isChanged = true;
});

とかでいけますかね

Comments

[yujill]

回答ありがとうございます＞＜

いただいたコードで置き換えてみましたが、残念ながら動きませんでした。
でも確かに、この辺りが怪しい気がしてきました。

コンタクトフォームはプラグインのContactForm7を使ってカスタマイズしているので、HTMLソースを見たらそもそもformタグがありませんでした。

そのため以下のように修正してみたのですが、やはりダメでした^^;

jQuery("body").on("change","input, textarea",function(){
　 isChanged = true;
});

他に試し見るべきことありましたらご教示いただけますと幸いです。
何卒宜しくお願いします。

Answer 3

returnさせるものが逆だからです。

jQuery(window).on('beforeunload', function(){
  if(!isChanged) {
    return "";
  }
});

// それか
jQuery(window).on('beforeunload', function(){
  return isChanged;
});

return false;をさせると、離脱ブロッックになるということです。
return "";と、return false;、return;は、ほぼ同じことをすることになります。
return true;か、そもそもreturnを書かないと、そのまま離脱許可になります。

Comments

[yujill]

回答ありがとうございます＞＜

質問に記載のコード２番目の３行目から５行目を、いただいた２パターンで置き換えて試しましたがやはり動作しませんでした・・・。

教えていただいた箇所以外に書き換えるところはありますでしょうか？
WP初心者なので基本的すぎるミスをしていたらすみません。

[yujill]

✖️３行目から５行目
○ ３行目から７行目

[miyabi_pudding]

なるほど・・・。
WordPressではなく、JavaScriptですね。
今回の質問だと。

そもそも、
'beforeunload'とかに代表される、ブラウザのデフォルトの機能を妨害しかねない仕様は推奨されていないので、
（つまり、やれる方法がそもそも無かったり、難しかったりするということ）
離脱の注意をしっかり目立つように記載するか、
離脱されても、後処理が可能な仕様にした方がいいかもしれません・・・。

[miyabi_pudding]

もうちょっとこちらでも検証してみますね。

[yujill]

お手数をおかけしてすみません。
こちらももう少し色々試してみます！