Contact Form 7で確認画面を出す方法
この記事を読むのに必要な時間は約 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に下記の記述を追加するだけ
|
1 2 |
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.wpcf7.confirm.js" type="text/javascript"></script> |
ファイルの場所などは、自分で入れたところに書き直して記述してください。
header.phpは、文字コードUTF-8で上書きしてください。
出来上がりの確認画面
いかがでしょう。
ちゃんと表示されましたでしょうか？
うまくいかない場合はお気軽にお問い合わせください。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存