「Contact Form 7」はお問い合わせフォームが作成できる、WordPressの定番プラグインです。今回紹介する「Contact Form 7 Conditional Fields」は、Contact Form 7をカスタマイズして条件分岐を追記できるプラグインです。

例えば、お問い合わせフォームの中に設置された「資料の送付を希望しますか」という質問に「はい」と答えた場合のみ住所記入欄を表示する、といった使い方ができます。実用性が高めなフォームなので、ご利用の方は本稿の解説をご参考ください。

インストール方法

WordPressの管理画面から、「プラグイン」→「新規追加」と進み、「Contact Form 7 Conditional Fields」を検索します。もしくは、下記ボタンからダウンロードします。インストールしたら、有効化します。

プラグイン公式ページ

当然のことながら、このプラグインは「Contact Form 7」がインストールされていなければ使えないので、注意してください。

インストールした「Contact Form 7 Conditional Fields」を有効化すると、コンタクトフォーム作成画面に「Conditional Fields」タブが、またフィールド一覧に「Conditional Fields Group」フィールドが、それぞれ追加されます。

Contact Form 7 Conditional Fields

実際のカスタマイズ手順

今回は冒頭で紹介したように、「資料の送付を希望しますか」の質問に対し、「はい」と答えた場合に住所記入欄を表示する、というカスタマイズを実際に行っていきます。

カスタマイズする前準備として、ひな型となるお問い合わせフォームを作成していく手順を説明します。カスタマイズ方法を早く知りたい方は、「条件分岐を追加」の見出しまで進んでください。

ひな型のお問い合わせフォームを作成

WordPressの管理画面から、「お問い合わせ」→「新規追加」で新たなコンタクトフォームの作成画面を開きます。

コンタクトフォームの初期項目は「お名前」「メールアドレス」「題名」「メッセージ本文」「送信」となっています。ここに「資料の送付を希望しますか？」という質問のチェックボックスフィールドと、住所記入欄となるテキストフィールドを追加します。

チェックボックスの追加

「メッセージ本文」と「送信」の間にスペースを設け、「チェックボックス」のフィールドを追加します。

フィールド名はカスタマイズ時に使用するため、後で見てもわかるように「shiryou-kibou」に変更します。「オプション」内に「はい」「いいえ」を1行ずつ入力し、「タグを挿入」を選択します。

挿入されたタグの前の行に「資料の送付を希望しますか？」と質問タイトルを入力します。

これで、資料送付の希望を確認するチェックボックスフィールドが設置されました。

住所記入欄の追加

続いて、資料希望のチェックボックスで「はい」と答えた人が住所を記入できるように、「テキスト」フィールドを設置します。

「資料希望」と「送信」の間にスペースを設け、フィールド一覧から「テキスト」を選択します（※下のキャプチャはコード挿入後の完成したサンプル）。

フィールド名を「juusho」に変更し、「タグを挿入」を選択すると、タグ名がフィールド名に合わせて変更されるので、再度「タグを挿入」を選択します。

挿入されたタグの前の行に「住所」とタイトルを入力します。

これで、住所記入欄となるテキストフィールドが設置されました。

条件分岐を追加

続いて、「資料の送付を希望しますか」の質問に「はい」を選んだ場合のみ、「住所記入欄」を表示する条件分岐を追加していきます。

条件によって表示・非表示したいフィールドを [group]タグで囲む

Contact Form 7 Conditional fieldsにおいては、条件によって表示・非表示を変えたいフィールドを事前に「グループ付け」する作業が必要となります。グループ付けするには、フィールドタグ一覧に追加されている「Conditional fields group」を使います。

「Conditional fields group」を選択し、グループ名をわかりやすい任意の名前に変更します。今回は「juusho」に変更しました。

グループ名を変更したら、「タグを挿入」を選択し、[group juusho][/group]の中に住所フィールドをタイトルごとドラッグし、[group]タグで囲まれている状態にします。

[group]タグはコンタクトフォームを保存しなければ反映されないため、この時点で一旦タイトルを入力して保存します。

2. 「Conditional Fields」のタブで、条件を追加する

続いて、「Conditional Fields」のタブに移動します。「+ add new conditional rule」を選択することで、フィールドの表示・非表示を設定するルールを追加していくことができます。

それぞれの項目は、下記のようになっています。

項目名 内容
①「–Select group–」 「Conditional fields group」で作成したグループ一覧が表示されます。
②「–Select fields–」 フォームに設置しているフィールド一覧が表示されます。
③「equals」 「equals」「not equals」の2種類から選ぶことができます。
④「Value」 「–Select fields」で選んだフィールドの選択肢の1つを入力する欄。

①～③はドロップダウンメニューとなっており、④は自由記入欄となっています。

③ =「equals」の場合

「–Select fields–」=「Value」の時に、「–Select group–」で選んだグループが表示されます。

③ =「not equals」の場合

「–Select fields–」=「Value」の時に、「–Select group–」で選んだグループが非表示となります。

３．「Conditional Fields」のタブで、条件を追加する

下記のように、「checkbox shirou-kibou」＝「はい」の場合に「juusho」のグループを表示するという条件を追加します。

項目名 内容
①「–Select group–」 「juusho」
②「–Select fields–」 「shiryou-kibou」
③「equals」 「equals」
④「Value」 「はい」

条件が追加できたら、「保存」を選択します。これで、条件が追加されました。試しに、コンタクトフォームを見てみましょう。
Contact Form 7 Conditional Fields

資料希望において「はい」を選択すると、フェードインのアニメーションと共に「住所」のフィールドが出現しました。必要に応じて、メールの送信設定も変更しましょう。

条件はいくらでも追加できるため、ちょっとこだわったお問い合わせフォームを設置したい方におすすめのプラグインです。