お問い合わせフォームの選択状態で表示を切り替える条件分岐が設定できる無料プラグイン「Contact Form 7 Conditional Fields」

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

お問い合わせフォーム内の入力項目を選択状態に応じて切り替えられたら便利ですよね。たとえば法人と個人で入力情報に差がある場合など。もし「法人」では「会社名」が入力必須で、個人であれば「名前」だけでOKなのであれば「個人」を選択したユーザーに「会社名」を出しておく意味がありません。

むしろ不要な項目は非表示にしておかないと離脱の原因につながります。つまり、入力しなくてもよい項目が表示されたままになっているとユーザーにとって「入力数が多い」という負担になってしまいます。入力項目は少なければ少ないほど成約率は高くなります。そのため負担になりかねない項目は非表示にするのがベスト。

本日はお問い合わせフォーム「Contact Form 7」をより便利にする無料のプラグインをご紹介いたします。

お問い合わせフォームで選択状態に応じて表示を切り替える条件分岐が設定できるプラグイン「Contact Form 7 Conditional Fields」

プラグインをインストールして有効化

プラグインのインストールは管理画面の「プラグイン > 新規追加」から行いましょう。

右上にあるキーワード検索ボックスに「Conditional Fields for Contact Form」と入れて検索。

以下のプラグインがヒットするのでインストールを進めましょう。

インストールが完了したら「有効化」をクリック。

有効化が完了すると以下のメッセージが表示されます。

条件分岐を追加するお問い合わせフォームを開く

次に「お問い合わせ > コンタクトフォーム」から該当のフォームを開きましょう。

条件分岐を追加する

以下の「Conditional fields」のタブが追加されています。クリックして条件を設定していきます。

なかに入って「+ add new conditional rule」をクリック。

すると「if」が追加されます。表示させる条件を設定していきましょう。

今回はラジオボタンに設定してきます。ラジオボタンでは「ブログ集客」「ホームページ更新代行」「オリジナル商品開発」と3つの選択項目があります。選ばれたラジオボタンで入力フォームを切り替える設定です。

Select fieldにラジオボタンの「radio-33」を選びます。もちろん「-33」などの数値は環境によって異なります。

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」  2万を超えるお客様がご使用中!

そして「ブログ集客」と入れればOKです。ちなみに右端の『And』は条件を追加する場合にのみ使います。

上記の式では「もしradio-33でブログ集客が選ばれたら」という条件分岐です。仮に右端の「And」を使うとしたら「もしradio-33でブログ集客が選ばれて、かつXXXだったら」といった複雑な指定が可能となります。今回は右端の「And」は使わずに「+ new conditional rule」をクリックしてシンプルな条件を追加します。

最終的に出来上がった条件分岐が下記です。本手順では左端にある「Show」に値が表示されないので「フォーム」タブから「Show」内に表示させるタグを追加しておきましょう。

フォームのタブで「Conditional Fields Group」をクリック。

するとポップアップウィンドウが開きます。名前を決めて「キーワードを挿入」をクリック。

そして、下記のような状態にしましょう。条件分岐のタグで入力項目をくくっています。

今回の手順では「メールアドレス」を切り替えたので以下のように設定しなければなりません。本来であればメールアドレスの入力フォームを条件分岐で表示切り替えすることはないはずですが、以下の手順ではイレギュラーでメールアドレスのフォームを切り替えているので以下のような状態で送信先を指定しています。なお、以下のキャプチャ画像では「構文エラー」が出ていますが今回はイレギュラーな指定方法なので仕方ありません。

設定方法は以上です。

まとめ

お問い合わせフォームで条件分岐を行う方法をご紹介させていただきました。今回は別で公開した記事との兼ね合いがあって「メールアドレス」の入力フォームを『ラジオボタンで切り替える』カスタマイズとなりました。一般的なフォームであればもう少しシンプルな構造になりますのでその点はご安心くださいませ。

お問い合わせフォームでの条件分岐は「ユーザーの離脱率」を抑えるために有効です。申し込みフォームを使うユーザーによっては「法人/個人」があったり、個人では法人ほど情報が不要な状況もあるでしょう。条件分岐を使うとユーザーに最適化されたフォームのみを絞って表示させられるので成約率の向上を期待できます。

フォーム内で表示を切り替えたいとお考えの方はぜひお試しくださいませ。テストページとして実際に設置したページが以下にありますので併せてチェックいただけます。ぜひご確認ください。

ジャンルを選ぶとフォームが切り替わるテスト(Contact Form 7)

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください