「Contact Form 7」に条件分岐機能を追加するプラグインの使い方をまとめてみました

WordPressの定番メールフォームプラグイン「Contact Form 7」を使っている方はとても多くいると思います

ただ以前「【2018年最新】「Contact Form 7」を強化する4つのWordPressプラグイン」という記事で紹介したような強化用プラグインを使っているなどを有効活用出来ている方は少ないのではないかと感じております。

その為、今回はその中の一つ、「Conditional Fields for Contact Form 7」というプラグインに対して掘り下げて紹介したいと思います。

Conditional Fields for Contact Form 7

以前、紹介したように入力内容に応じて各フィールドを自動で表示・非表示の切り替えができるようになるプラグインです。
つまり、AとBという選択肢があって、Aを選択したらCの入力欄が表示、Bを選択したらDの入力欄が表示といった条件分岐が出来るようになります。
無論、メール文章の方も選択肢によって表示・非表示が設定可能ですので、柔軟に設定が可能です。

インストール方法

インストール方法ですが、WordPressの公式プラグインディレクトリに登録されていますので、
プラグイン追加画面で「Conditional Fields for Contact Form 7」と検索し表示されたプラグインをインストールして有効にしてください。

また Contact Form 7は先に導入して下さい。

利用方法

インストールして有効にするとコンタクトフォームの編集画面において「Conditional fields Group」というボタンと、「Conditional fields」というタブが追加されます。

簡単に利用方法を解説すると、「グループタグで囲んだ範囲を”Conditional fields”タブの条件に沿って表示する」というものです。実際に設定してみましょう。

フォームの設定内容

下記のものがフォームに設定する内容です。新しく追加された”group”というのが「Conditional fields Group」ボタンで挿入できるグループタグです。

また表示・非表示の選択肢として、radioタグでラジオボックスを追加しています。

<label> お名前 (必須)
    [text* your-name] </label>

<label> メールアドレス (必須)
    [email* your-email] </label>

<label> 題名
    [text your-subject] </label>

<label> メッセージ本文
    [textarea your-message] </label>

年齢も答えますか?
[radio your-check use_label_element default:2 "はい" "いいえ"]

[group group-yes]
<label> 年齢
    [number your-age min:1 max:100]</label>
[/group]

[submit "送信"]

「Conditional fields」の設定内容

Conditional fieldsタブではラジオボックス「your-check」の選択結果が「はい」の場合は、group-yesを表示するという設定をしてあります。
group-yesというのは上記フォームの設定内容における年齢入力欄を囲んでいるグループタグの名称です。

このようにすることで、ラジオボックス「your-check」の選択結果が「はい」の時のみ年齢入力欄を表示するという設定が可能です。

デモ

実際にどうなるのか見てみましょう。

WordPressのデフォルト記事「HelloWorld」にコンタクトフォームを埋め込むタグを設定して表示させてみました。

 

こんな感じですね。ここで、一番下の選択肢で「はい」を選ぶと下記のようになります。

年齢入力欄がアニメーションと共にすっと表示されました。
このように簡単に選択肢によって表示したい項目を作ることが出来ます。

メール文章の分岐

メール文章も同じように選択肢で内容を変えることが出来ます。

メールタブのメッセージ本文を下記のように設定することで、「年齢も答えますか」に「はい」と答えた場合のみ、年齢欄も送信しています。

差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:
[your-message]

[group-yes]
年齢: [your-age]
[/group-yes]


-- 
このメールは テストサイト (http://localhost) のお問い合わせフォームから送信されました

まとめ

このように「Conditional Fields for Contact Form 7」は缶単位入力内容によって好きなように入力欄を表示・非表示にすることが出来ます。

選択肢によって内容を変えるというのは多々あると思います。
例えば何か製品を作っている企業のお問い合わせフォームで、会社に対する問い合わせ、製品に対する問い合わせでそれぞれフォームとしての入力欄は変えたいでしょう。
本来2ページに分かれてしまいますが、このプラグインを使う事でスマートに一つにまとめることが出来ます。

この便利なプラグインを是非、皆様も有効活用してみてください。

参考にしたWebページ

それぞれプラグインの公式ドキュメントと配布ページです。

Tutorial: How to set up Conditional Fields for Contact Form 7

Conditional Fields for Contact Form 7

  
  • このエントリーをはてなブックマークに追加

よく読まれている記事