Contact form 7で作成したフォームは送信ボタンを押すとすぐに送信されてしまいます。送信前に内容の確認画面を入れたいときに使えるプラグインがあります。
Contact form 7 add confirmです。
このプラグインの導入はとても簡単で説明の必要がないくらいです。
しかし、説明しなくても設定できる反面、設定方法を間違えると原因不明なまま動かないケースがあり、ハマる人は結構多いのではないかと思います。この記事では、 Contact form 7 add confirm 導入時の注意点をまとめておきたいと思います。
コンタクトフォームのタグの順番に注意
既存のコンタクトフォームに後から追加する時によくハマるのが、タグの順番です。
送信ボタンよりも手前にタグを追加しないと動作しません。
[confirm "確認する"][back "修正する"][submit "この内容で送信する"]Javascriptの圧縮に注意
javascriptの圧縮機能があるテーマやプラグインを使っている場合によくハマるのが、javascriptを圧縮してしまうとエラーになって正常に動かないという現象です。
検証ツールなどでjavascriptのエラーが出ているのを確認できれば、圧縮が原因だとすぐにわかるのですが、初心者にはなかなか気づけないと思います。
Javascriptの圧縮から除外すべきファイル
圧縮から除外するjsファイルは、以下のパスのファイルになります。
Cocoonならそのまま除外ファイルとして貼り付ければよいです。
contact-form-7-add-confirm/includes/js/scripts.js
Contact form 7 バージョン5.4との組み合わせで動かない
Contact form 7がバージョンアップして5.3.2⇒5.4になりました。Contact form 7 Ver5.4とContact form 7 add confirmの組合せで動かなくなりました。
WordPressプラグイン
— taka (@taka_sbs) March 1, 2021
「Contact Form 7を最新（5.4）にアップデートするとContact Form 7 add confirmに不具合が起きる」
との情報があったので実験してみるとホントだ～(つд`)
メッセージ欄の枠だけ出て確認画面へ移行せず送信できません…。
Contact Form 7 add confirm使用している方はご注意を。 pic.twitter.com/Lmw5oj8CZl
Contact form 7 add confirmはバージョンアップが止まっています。作者による修正は期待できない状況ですが、このプラグインは利用者が多いので誰かが修正方法を公開してくれるのではないかと思っています。
Contact form 7を古いバージョンに戻す
現時点の対策は、Contact form 7をVer5.3.2に戻すしかありません。
Ver5.4と5.4.3に特に大きな違いは無いので、以下のプラグインでバージョンを戻して様子を見た方が良いと思います。
非推奨：Contact form 7 multi-step formsを使う
Contact form 7 multi-step formsを使うと確認画面が作れるという情報もあります。
ただし、あまり有効な方法ではないようです。
だが・・・Contact Form 7 add confirmがアップデートしないなら一時しのぎ。
— コーラ (@17clip) March 4, 2021
代替え案Contact Form 7 Multi-Step Formsで同じ役割の送信前に「確認する」を作ってみたが、制作の手数がかかって面倒。確認のためのコンタクトフォーム、固定ページなどフォームの分だけつくるとなると時間かかるよ。
お奨め：Contact form 7 add confirmを最新版のContact form 7で動くように修正する
以下の記事にまとめてあります。
まとめ
Contact form 7 add confirmは本家と合わせて導入した方が良いプラグインだとおもいます。
導入もとても簡単なのですが、テキトーにやっているとつまづきますので、そんな時は今回の記事を参考にしてみてください。
