100回まであと3回!の第97回WordBench神戸にオンライン参加しました。
日時:2018年9月15日(土)14:00〜17:00
今回は、リアル+リモート同時開催 & WordCampTokyo 2018会場とも中継というフレキシブルかつ豪華な設定で、行きたかったWordCampTokyo2018の雰囲気も垣間見れて良かったです。
(わぷーのぬいぐるみが可愛すぎて、販売して欲しいくらいでした。)
「何でも質問大会」ということで、知っている人がほとんどいない中ひっそり参加していたのですが、勇気を出して質問しました。
質問して、すっごく良かったので、書き留めておきます。
それは
お問い合わせフォームで、選択したものによって次に表示させる内容を分岐させる
というものです
『プルダウンメニューを選択すると、さらにその選択した内容によって違うプルダウンメニューが出る』
ということがやりたかったのです。
プラグインのインストール
プラグイン
・Contact form 7
・Conditional Fields for Contact form 7
の2つを使えばできます!
Contact form 7はインストールしていたので、Conditional Fields for Contact form 7を初めてインストールしました。
Contact form 7でフォームを作る
(1) 「ドロップダウンメニュー」をクリックし、選択肢を作ります。
(2)メニューの名前(menu-1)を付け、オプションに選択肢を記入します。
(3)「お花」を選択した時に現れる選択肢も同じように作ります。(メニュー名 menu-1a)
(4)同じように、「動物」を選択した時に現れる選択肢、「食べ物」を選択した時に現れる選択肢、も作ります。
「フォーム」はこのようになります。
Conditional Fields Groupでグループを作る
(1)「 Conditional Fields Group」 をクリックします
(2)名前(group-1)をつけて、グループを作ります。ここで、ショートコードが作成されます。
(3)(2)で作成されたショートコードで、表示させたいフォームを囲みます。
(4)(1)〜(3)を繰り返して、グループを作り、ショートコードで表示させたいフォームを囲んでいきます。
全て記述したら、保存します。
Conditional fields で条件を作ります
(1)「Conditional fields」をクリックします。
(2)この画面で、条件を作成していきます。
(3)「add new conditipnal rule」をクリックしながら、
group-1は、menu-1が『お花』の時表示する
group-2は、menu-1が『動物』の時表示する
group-3は、menu-1が『食べ物』の時表示する
と、条件を作ります。
これで完成です!
phpを触るとか、JavaScriptを使うとか、もっと大変かと思っていたら、
Conditional Fields for Contact form 7
というプラグインで簡単にできました。
選択するものによって、その時だけテキストフォームを表示したり、条件分岐のさらに分岐もできます。
便利ですねー。
WordBench神戸のみなさま、ありがとうございました!