この記事を読むのに必要な時間は約 12 分です。

Contact Form 7  はWordPressによるサイト製作でお世話になることが多いプラグインの1つ。
ただ、クライアント様によっては、入力、確認、送信の3フェーズにしたいという要望があり、そんな時は別の方法を採用していたのですが、JavaScript（jQuery）を使ってページ遷移しなくてもいいなら確認フェーズは用意できるかなと思い、作り込んでみた。というより設置してみたかな？

 

確認画面とは？

通常のフォームであれば送信ボタンがついてます。しかし、確認画面を出してから送信する場合は・・・

このように確認というボタンになります。その後、修正と送信ボタンが出てくるという流れになります。
いきなり送信してしまうより確認画面で確認してから送信したいですね。

プラグインを使う場合

Contact Form 7  では定番の確認画面を出すためのプラグインのContact Form 7 add confirm  ですが・・・
ただ、動かないことも多いのです。
なぜ、動かないのか原因を探してみました。

• functions.phpで独自のjQueryを読み込んでいる
• 共用SSLを使っている
• wp_headとwp_footerを読み込んでいないもしくは、設置場所が移動してる
• jQueryの書き出しに問題がある

functions.phpで独自のjQueryを読み込んでいる

WordPressにスタックされているjQueryを外して、functions.phpで独自のjQueryを読み込ませている場合に、Contact Form 7 add confirm  が動かなくなる場合があります。

共用SSLを使っている

メールフォームのページだけ共用SSL環境になっていると、Contact Form 7 add confirm  が動かない場合があります。この場合は共用SSLをやめるか、専用SSLにすることで確認画面が表示されるようになるかと思います。

wp_headとwp_footerを読み込んでいないもしくは、設置場所が移動してる

Contact Form 7 add confirm  はWordPressのデフォルトの jQuery を使用して動作しているようなので、この2つを書き忘れて確認画面に遷移しないってことがあるようです。
テーマでちゃんと記述があるか確認するとOKなわけですが、それぞれの位置関係は「<!–?php wp_head(); ?–>」の位置は「</head>」タグの直前で、「<!–?php wp_footer(); ?–>」の位置は「</body>」タグの直前です。

jQueryの書き出しに問題がある

プラグインコードによってはバージョンの関係でどうしても動作しないというものもありますが、98％は書き出しのミスが動かない原因です。よそのホスト（Google等）のファイルを読み込んで使っている場合には、諦めましょう。

jQueryの確認

jQueryが動かない時に確認したいこと

• スクリプトエラー
• 処理のタイミングを確認
• jQueryのバージョンチェック
• ブラウザのバージョンチェック
• 「$」が競合してしまいエラーになっていないか？
• プラグイン利用時に動かない
• セレクタの重複チェック
• DOCTYPE宣言
• ローカルでの検証

上記のように挙げてみましたが、正直言うと素人の方は難しいのでContact Form 7 add confirm  の使用はLightning  では断念した方がよさそうです。

JavaScriptで実装する方法

Contact Form 7 add confirm  の使用を諦めjquery.wpcf7.confirm.js のダウンロードと設置をしてみようと思います。

上記のページに書かれていた方法なのですが・・・

まずは、JavaScriptのファイルをダウンロードします。
https://elearn.jp/wpman/column/c20111212_01.html  
jquery.wpcf7.confirm.js v0.12 
くまはちの場合は、子テーマフォルダの中に入れてアップロードしました。
後は、header.phpに下記の記述を追加するだけ

ファイルの場所などは、自分で入れたところに書き直して記述してください。
header.phpは、文字コードUTF-8で上書きしてください。

出来上がりの確認画面

いかがでしょう。
ちゃんと表示されましたでしょうか？
うまくいかない場合はお気軽にお問い合わせください。