Conditional Fields Contact Form 7を使った条件分岐の設定方法

アンケートやユーザー登録などのフォームは、どうしても入力項目が増えがちです。しかし設問量が多すぎると、ユーザーはわずらわしさを感じて離脱しやすい傾向があります。

これを回避するのに役立つのが「Conditional Fields for Contact Form 7」です。これはお問い合わせフォームをかんたんに条件分岐設定できる便利なプラグインで、ユーザーに対して必要な入力項目だけを表示できます。本記事では、Conditional Fields for Contact Form 7について、設定方法や導入メリットを具体例を挙げながら紹介します。

そもそも、「Contact form 7ってどんなプラグインなの？」「基本的な使い方などを知りたい」という方は、以下の記事を参考にしてみてください。
Contact Form 7の使い方まとめ｜設定方法・カスタマイズ・おすすめプラグイン

「Conditional Fields for Contact Form 7」とは

Conditional Fields for Contact Form 7とは、コーディング不要でお問い合わせフォームを条件分岐できるWordPressプラグインです。「”はい”と答えた人にはAの質問を表示し、”いいえ”と答えた人にはBの質問を表示する」など、回答内容によって次に表示される質問内容を変えられます。回答送信後に届くメールの内容も回答によって変えることができるため、ひとつのフォームで質問や完了メールを出し分けたい場合にとても便利です。

基本機能は無料で利用できます。有料のPRO版も提供していますが、複雑な分岐でなければ無料版で十分対応できます。

「Conditional Fields for Contact Form 7」の設定方法

プラグインの設定は、「Conditional Fields for Contact Form 7をインストール・有効化」→「お問い合わせフォーム作成」→「条件分岐させたい設問にタグ付与」→「ロジックを追加する」という手順でおこないます。慣れないうちはロジックを追加する部分で戸惑う可能性があるため、かんたんな条件分岐から試してみるのがおすすめです。

「Conditional Fields for Contact Form 7」を有効にする

WordPressの管理画面から［プラグイン］_［新規追加］を選択し、「Conditional Fields for Contact Form 7」をインストール・有効化します。

※Contact Form 7がインストールされているのが前提です。

「Conditional Fields for Contact Form 7」を有効化すると、コンタクトフォームの編集画面に［条件付きフィールド］タブと、［条件付きフィールドグループ］タブが追加されます。

Contact Form 7でお問い合わせフォームを作成する

元になるお問い合わせフォームをContact Form 7で作成します。

※基本のお問い合わせフォーム作成方法については、以下を参考にしてください
https://wpmake.jp/contents/plugin/contact-form7/

[group]タグの設定をおこなう

コンタクトフォームの編集画面にある［条件付きフィールドグループ］タブをクリックすると、タグ生成画面が表示されます。

名前欄にわかりやすい名前を付けて［タグを挿入］ボタンをクリックすると「［group （グループ名）］［/group］」タグがフォームに追加されます。ます。「非表示になった時に初期値にリセット」と「インライン」のオプションはオフのままにします。

追加されたgroupタグで、条件分岐後に出し分けたい設問のタグを挟みます。

完了後、コンタクトフォームを保存します。

[Conditional Fields]タブから条件ロジックを追加する

コンタクトフォームの編集画面で「条件付きフィールド」タブをクリックします。「+新規条件付きルールを追加」ボタンをクリックして条件付きフィールドを追加します。

条件付きフィールドのルールは、以下のような構造になっています。

① 設定対象グループ（Select group）：groupタグで設定したグループ名（グループタグ）を選択します
②条件フィールド（Select fields）：条件を指定したいフィールドを選択します
③ 分岐条件（equals）：「equals」「notequals」のいずれかを選択します
④ 分岐条件の値（Value）：条件の値を入力します

メールの設定をおこなう（必要に応じて）

フォーム完了時に送信されるメールに対して、条件分岐の結果を反映できます。

groupタグで設定したグループタグをメール設定画面に追加すると、グループタグで挟まれた内容が「（その）グループが表示されたとき」に送信されます。

なおメール設定画面でのグループタグの追加は、手作業で行う必要があります。グループ名が分からない場合は、「条件付きフィールド」タブ画面を表示し、「テキストモード」をオンにすると名前を確認できます。

条件分岐させるメリット

フォームを条件分岐させることで、車を持っていない人に対して所有車種を尋ねるような不要な質問を回避できます。ユーザーは自分に無関係な質問に回答せずにすみ、時短・ストレス軽減につながります。

Webサイト運営側にとっても、回答してほしい相手にだけ質問を表示することで正確なデータ収集が可能になるほか、わかりやすい内容になるため離脱率の低下が期待できます。

条件分岐の実装例

条件分岐の例として、顧客にWebサイトの状況を尋ねるフォームを紹介します。

図の例では、以下の3つの条件を設定しています。

・「その他」を回答した場合（if [radio-CMS] equals “その他”）に、「その他記入欄」を表示する（show [other-selected]）

・Webサイトのお悩みが「ある」場合に（if [radio-problem] equals “ある”）、「お悩み記入欄」を表示する（show [have-probrem-selected]）

・「お悩み記入欄」に記入があり（if [text-yourProblem] not empty “”）、かつURL欄に記入があり（if [text-yourURL] not empty “”）、利用CMSが「WordPress」の場合（if [radio-CMS] equals “WordPress”）に、「コンサルティング希望」を表示する

※not emputyはPro版の機能です。not equalsで代用できます

設定について詳しく知りたい方は、以下の公式チュートリアルも参考にしてください。

★公式チュートリアル
https://conditional-fields-cf7.bdwm.be/conditional-fields-for-contact-form-7-tutorial/

まとめ

Conditional Fields for Contact Form 7を使うことで、プログラミングスキルがなくてもお問い合わせフォームで高度な条件分岐機能を利用できます。入力項目が多いフォームや自分に無関係な質問があるフォームは離脱率が高くなる可能性があるため、条件分岐を活用して入力しやすいフォームを工夫することが重要です。

また、さらに複雑なフォームやセキュリティ対策も考慮したフォームを作成したい、といった場合は、WordPress専門の開発チームに依頼してみてはいかがでしょうか？

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

• WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
• セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
• WordPressに最適なサーバーの選定や構築から依頼したい…
• SEO対策や高速化も考慮したサイト構築を行なってほしい…
• 制作後の保守・運用についてもサポートしてほしい…
• 今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する