今回は、Contact Form 7 に確認画面を追加する方法をご紹介します。
プラグイン：Contactform7を利用する事で、簡単にお問い合わせフォームを作成する事が出来ます。
簡単に出来る分、
- 入力項目を確認するためのページ
- お問い合わせ完了ページへの遷移
- 確認用メールアドレスの入力とチェック
などが、Contactform7だけでは出来なくなっています。
そこで、「Contact Form 7 add confirm」を利用して実現する方法をご紹介します。
※プラグイン：Contact Form 7 add confirmに関しては、長く更新が行われていないプラグインとなります。
そのため、セキュリティや動作などご注意の上ご利用ください。
Contactform7を使って問い合わせフォームを作る方法に関しては、以下を参考にしてください。
目次
プラグイン：Contact Form 7 add confirmを利用した確認画面の追加手順
Contact Form 7 add confirmのインストール＆有効化
管理画面にログインし、[プラグイン]-[新規追加]をクリック
検索窓に「Contact Form 7 add confirm」と入力
「Contact Form 7 add confirm」を「今すぐインストール」⇛「有効化」を実施
問い合わせフォームへの確認ボタンの追加
左メニュー[お問い合わせ]をクリックした後、追加したいコンタクトフォームをクリック
[確認ボタン]or[戻って編集ボタン]をクリック
[ラベル]の項目に、ボタンに表示したい文言を入力の上で、[タグを挿入]をクリック
同様に、[確認ボタン]or[戻って編集ボタン]のもう片方も実施し保存してください
項目として3つが並ぶ形になりますが、
入力画面：確認のボタンのみ
確認画面：送信、内容修正のボタン
が表示されます。
入力画面
確認画面
入力画面や確認画面で表示内容を変更する
以下の設定を行う事で、お問い合わせページとしてわかりやすくなりますが、htmlとcssが必要になります。
そのため、ご興味ある方のみ参考にしてください。
（非常に簡単なものですので、この機会にちょっと触れてみるのも良いと思います）
各画面でのみ表示する内容
以下のclass要素を指定することで、その画面にだけ文章や画像を表示することができます。
- 入力画面のみで表示：wpcf7c-elm-step1
- 確認画面のみで表示：wpcf7c-elm-step2
- 完了画面のみで表示：wpcf7c-elm-step3
参考例
<p class="wpcf7c-elm-step1">お問い合わせ内容を入力してください</p>
<p class="wpcf7c-elm-step2">入力内容をご確認ください</p>
<p class="wpcf7c-elm-step3">お問い合わせ頂きありがとうございます</p>
入力ページ
確認ページ
完了ページ
あとはご希望に合わせて、CSSを設定し見た目を整えて上げてください。
まとめ
今回は、「Contact Form 7 add confirm」を利用し、Contact Form 7 に確認画面を追加する方法をご紹介させて頂きました。
通常のブログでのお問い合わせなどの場合には、この様な機能は不要な場合が多くなります。
しかし、お問い合わせをもらっても入力内容に誤りがあると、大きな機会損失に繋がってしまう
- 会社のお問い合わせフォーム
- サービスの申し込みフォーム
などは、少しでもミスを減らすため導入してみるのも良いかと思います。
投稿者プロフィール
こんにちは。㈱シンラウンド代表の中島 達（@NakajimaSatoru）です。