- 動画の再生速度を３倍４倍にするChromeの拡張機能をYouTubeに使ってみる
Topics
インフォコネクト最新情報
Contact Form 7 v5.4にアップデートして確認画面へ遷移しなくなった Contact Form 7 add confirm の修正方法【v5.5.1検証済み】
Contact Form 7 v5.4にアップデートして確認画面へ遷移しなくなった Contact Form 7 add confirm の修正方法【v5.5.1検証済み】
この記事は公開から１年以上経過しています。
■□■ 2021年10月22日 追記 ■□■
Contact Form 7 v5.5.1検証済み最新の記事も公開していますので、参考にしてみてください！
2021年10月22日公開記事：Contact Form 7 v5.4以降にバージョンアップしたため読み込み制限が機能しなくなった時の修正方法【v5.5.1検証済み】
https://info-con.co.jp/tips/wordpress-26-contact_form_7-restriction/
■□■□■□■□■□■□■□■□■□■□■
こんにちは、チーフクリエイターのSHOJIです。
2021年2月25日にリリースされた『Contact Form 7 5.4』（※10/18現在 v5.5.1）ですが、更新したことにより、お問い合わせフォームに送信前の確認画面を設置する目的で使用したプラグイン『Contact Form 7 add confirm』が正常に動かず、確認ボタンを押しても確認画面に遷移しない症状が起きています。
2021年3月7日公開記事：『お問い合わせフォームが送信できない！Contact Form 7 バージョン5.4 への更新で Contact Form 7 add confirm が正常に動作しない件』
https://info-con.co.jp/tips/wordpress-15-contact_form_7_add_confirm/
前回の記事では、その応急対策として『Contact Form 7』のバージョンを『5.3.2』に戻す方法を紹介しましたが、今回は別対策として『Contact Form 7 add confirm』内ファイルの不具合箇所を直接修正する方法をご紹介します。
画面遷移不具合の修正
参考記事：プログレス合同会社『お問い合わせフォームの障害』
https://www.progress-llc.co.jp/blog/post-20210318/
『Contact Form 7』をバージョン5.4へアップデートしたことで、画面遷移しなくなった不具合については『Contact Form 7』のユニットタグのプロパティ名が『Contact Form 7 add confirm』の記述と異なることによるもの。
そこで『Contact Form 7 add confirm』側の記述が異なる箇所を修正することで、不具合を解消していきます。
記述を修正するファイルは、
［plugins］→［contact-form-7-add-confirm］→［includes］→［js］→［scripts.js］
になるので、『FileZilla』や『Cyberduck』といったFTPクライアントソフトを使って、ファイル［scripts.js］をダウンロードします。
①ダウンロードしたファイル［scripts.js］を複製して、バックアップをとっておきます。
②ファイル［scripts.js］の223行目から226行目辺りの２箇所に「event.detail.id」とあるので、これを「event.detail.unitTag」と修正します。
参考記事：Contact Form 7 公式『DOM イベント』
https://contactform7.com/ja/dom-events/
確認画面から戻った後の表示改善
また、確認画面に進んだ後で再度入力画面へ戻った際に、その後のエラーメッセージや送信完了のメッセージが表示されない不具合も発生していたため、同ファイル［scripts.js］内に記述を追加して解消していきます。
③ファイル［scripts.js］156行目辺り「wpcf7c_to_step1」項目末尾に、以下の参考画像のように追記します。
送信完了メッセージの表示
■□■ 2022年1月5日 追記 ■□■
前項までの修正だけでは、正常に送信された後のアナウンス「ありがとうございます。メッセージは送信されました。」が表示されない不具合が解消されていないご指摘をいただきました。
この点について、弊社お客様が簡単にアクセス解析を行えるよう導入しているアクセス解析ツール『Juicer（ジューサー）』にてコンバージョンを計測するため、送信完了後に特定のページに遷移させるようにしていたため、ページ遷移せずフォーム内でメッセージ表示させるデフォルト仕様を完全に見落としてました。。。失礼いたしました💦
さて、この不具合の原因は、『Contact Form 7』のバージョン5.4より前まではメッセージ関連の［.wpcf7-response-output］に対して［display:block］を上書き追加することでアナウンスを表示させていましたが、バージョン5.4以降の仕様変更によって『Contact Form 7 add confirm』側に設定された［display:none］が［display:block］へと上書き追加されないため非表示の状態のままとなってしまっていることによります。
よって、『Contact Form 7』のバージョン5.4以降の仕様に合わせたアナウンスの表示非表示設定の記述に修正することで、不具合を解消してあげます。
④ファイル［scripts.js］72行目辺りにある「responseOutput.css("display", "none");」部分を、以下の参考画像のように修正します。
■□■□■□■□■□■□■□■□■□■□■
キャッシュによる動作不良解消
さらに、①～④の修正後にファイル［scripts.js］をアップロードしても、ブラウザのキャッシュの影響によって、修正されたJavaScriptが読み込まれずに、正常に動作しないない場合があるため、プラグインのバージョン情報を変更することで、修正されたJavaScriptを読み込むようにします。
バージョン情報を変更するファイルは、
［plugins］→［contact-form-7-add-confirm］→［contact-form-7-confirm.php］
になるので、『FileZilla』や『Cyberduck』といったFTPクライアントソフトを使って、ファイル［contact-form-7-confirm.php］をダウンロードします。
⑤ファイル［contact-form-7-confirm.php］31行目辺りにあるバージョン情報を、以下の参考画像のように変更します。
アップロードおよび動作確認
⑥ファイル［scripts.js］と［contact-form-7-confirm.php］の変更後、FTPクライアントソフトを使って元のディレクトリにアップロードします。
⑦実際に『Contact Form 7』バージョン5.4以降のお問い合わせフォームにて、正常に動作するか確認します。
動作確認で正常に送信が完了すれば終了です。
万が一、正常に動作しなかったり、エラー表示されたりする場合に備えて、事前にバックアップをとっておく必要がありますので、実際に変更作業を行う場合は作業に関連する様々な知識を有するとともに、自己責任というリスクを十分理解したうえで行ってください。
あとがき
やはり、WordPressを利用していてサイト内にお問い合わせフォームを設置しようと思われている方によって広く使われていることから、記事へのアクセスも多くありがとうございました。
弊社の記事が、少しでも皆様のお悩み解決に繋がっていれば幸いです！
先述の記事にて、更新の途絶えたプラグインを使い続けることはセキュリティの観点からリスクを伴う旨を書かせていただきました。
それと同時に、応急対策としてプラグイン『Contact Form 7』をダウングレードする方法と、恒久対策として更新の続いているプラグインへの変更についても付け加えたのですが、正直なところ、現時点では代わりとなり得るプラグインが見つかりません。
かと言って、ダウングレードしたプラグインを使い続けるのも本末転倒...
記事公開時点ではContact Form 7もv5.4.2までバージョンアップされています。
そんな折、先にご紹介したプログレス合同会社様のサイトにて、応急対策の参考記事が掲載されていたのを拝見させていただき、弊社も４月の時点で修正を行っていました。
変更後に約半年ほど経過して特に大きな問題も発生していないことと、『Contact Form 7』関連の記事へのアクセスが多いことから、今回の記事公開となりました。
ただし、今回の対策も弊社ではあくまで応急対策と捉えていますので、確認画面を撤廃するのか、あるいは、他のプラグインを利用して確認画面設置を継続するか引き続き検討していき、恒久対策していきたいと考えています。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。