「Contact Form 7 add confirm」を利用してContactform7に入力確認画面を追加する方法

こんにちは。㈱シンラウンド代表の中島 達(@NakajimaSatoru)です。

今回は、Contact Form 7 に確認画面を追加する方法をご紹介します。

プラグイン:Contactform7を利用する事で、簡単にお問い合わせフォームを作成する事が出来ます。

簡単に出来る分、

  • 入力項目を確認するためのページ
  • お問い合わせ完了ページへの遷移
  • 確認用メールアドレスの入力とチェック

などが、Contactform7だけでは出来なくなっています。

そこで、「Contact Form 7 add confirm」を利用して実現する方法をご紹介します。

※プラグイン:Contact Form 7 add confirmに関しては、長く更新が行われていないプラグインとなります。
そのため、セキュリティや動作などご注意の上ご利用ください。

参考記事

Contactform7を使って問い合わせフォームを作る方法に関しては、以下を参考にしてください。

プラグイン: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 に確認画面を追加する方法をご紹介させて頂きました。

通常のブログでのお問い合わせなどの場合には、この様な機能は不要な場合が多くなります。

しかし、お問い合わせをもらっても入力内容に誤りがあると、大きな機会損失に繋がってしまう

  • 会社のお問い合わせフォーム
  • サービスの申し込みフォーム

などは、少しでもミスを減らすため導入してみるのも良いかと思います。

投稿者プロフィール

中島 達(Nakajima Satoru)
中島 達(Nakajima Satoru)
株式会社Synround 代表取締役

「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。

web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。

過去の事業:Webサービス×2、レンタルスペース5店舗

ABOUTこの記事をかいた人

株式会社Synround 代表取締役 「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。 web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。 過去の事業:Webサービス×2、レンタルスペース5店舗