カスタムフィールドで、質問を選択するフィールドで答えによって追加の質問フィールドが出せたらなぁ・・・でもそんなコード書けないや。
なんて思っていませんか？
JetEngineのMeta fieldsに必ず付いてしる設定の『Conditional Logic』でNoCodeでも簡単にそのフォーマットが作れてしまいます！
『Conditional Logic』は、例えばユーザーに『はい/いいえ』で答えてもらうようなフォームで『はい』を選択した場合は追加質問を表示させ、『いいえ』の場合は質問がそれで終わるなど、ユーザーの回答次第でフォームを分岐させることのできる機能です。
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
以下はこの記事の要約です。
- Conditional Logicは質問形式のフォームを答えによって次の質問に分岐したり、答えによっては不要になるフィールドを隠すことができる。
- Conditional Logicの機能を使用するには、最低で2つのMeta fieldが必要。
- 追加質問に当たるMeta fieldでConditional Logicをオンにして設定を行う。
- Equal / Not EqualはValueで選択する項目が1つのときに使用する。
- In the list / Not in the listはValueで選択する項目が複数のときに使用する。
Conditional Logicとは？
例えばこのように『あなたは大学へ行きましたか？』の質問に対し、『はい』と答えた場合に『どこの大学へ行きましたか？』という追加の質問が表示されました。
しかし『いいえ』と答えた場合は特に追加の質問は表示されませんでした。
このようなフォームが作れるのがConditional Logicです！
上記のConditional Logicを使って作成したフィールドを例に、以下のセクションでその設定方法を説明します。
Conditional Logicの設定の仕方
まずは最初の質問の『あなたは大学へ行きましたか？』のフィールドを作ります。
上記はそのMeta field『あなたは大学へ行きましたか？』の作成例です。
- Label: あなたは大学へ行きましたか？
- Name/ID: went_university
- Object types: Field
- Field type: Radio
Field Option①:はい
Field Option②:いいえ
その次に追加の質問となる『どこの大学へ行きましたか？』のフィールドを作成します。
上記はそのMeta field『どこの大学へ行きましたか？』の作成例です。
- Label: どこの大学へ行きましたか？
- Name/ID: which_university
- Object types: Field
- Field type: Text
- Conditional Logic: オン
以下はConditional Logicを『オン』にすると表示されるエディターで、『Field』と『Operator』という設定があります。
Fieldは『Select field…』の横の▼をクリックすると上記のような同じ投稿タイプのMeta fieldsで作成した各項目のLabelが表示されます。
そこからConditional Logicで質問を分岐させたいフィールドを選択します。
※このサンプルの場合は『あなたは大学へ行きましたか？』を選択します。
Operatorは『Select operator…』をクリックすると以下のリストが表示されます。
このサンプルでは、『あなたは大学へ行きましたか？』の質問の答えが『はい』の1つのリストのみでConditional Logicが作動するのでOperatorで『Equal』を選択します。
Oparatorを選択すると『Value』の項目が新たに追加されます。
Valueのプレイスホルダーをクリックすると、『あなたは大学へ行きましたか？』のフィールドで作成したField Optionのリストが表示されます。
このValueで『あなたは大学へ行きましたか？』の質問で次の追加質問に移行させたい方の答えを選択します。
このサンプルの場合は追加質問が『どこの大学へ行きましたか？』と、最初の質問の『はい』に対する追加質問なのでValueは『はい』を選択します。
これで完了です！
これで上記のフィールドは『あなたは大学へ行きましたか？』の質問で『はい』または『いいえ』で答えた後でカスタムフィールドの表示が変わるようになりました！
Equalでは『Value』は1つの項目しか選べません。
もし Equalと同じような設定だけどValueを複数選択したい、という場合はOperatorの設定は『In the list』になります。
Equalの使用例
『Equal』は上記セクションの『Conditional Logicの設定の仕方』をご覧ください。
Not Equalの使用例
例えば上記のように『アレルギーはありますか？』のリストから選択する質問と『リストにない場合はこちらに記入してください。』というテキストで入力するタイプのフィールド両方が最初からあるとします。
ちなみに『アレルギーはありますか？』のリストの中には『いいえ』という項目もあり、正直『いいえ』を選択した場合は『リストにない場合はこちらに記入してください。』というフィールドは不要ですよね。
その場合はOperatorの『Not Equal』が役に立ちます。
『リストにない場合はこちらに記入してください。』のMeta fieldのConditional Logicをオンにして以下のように設定します。
- Field: アレルギーはありますか？
- Operator: Not Equal
- Value: いいえ
上記は実際の『アレルギーはありますか？』のカスタムフィールドのリストで『いいえ』を選択した時の表示画面です。
リストが未選択のときにはあった『リストにない場合はこちらに記入してください。』のフィールドが表示されなくなりました。
こちらはあくまでもNot Equalの使用例ですが、上記のように答えが人それぞれ異なる質問などでより正確に情報の幅をも持たせられるフィールドが作れますね！
なお、Not Equalも選択できるValueの数はEqualと同じで1つのみです。
もし、Not Equalと同じようなフィールドで、選択できるValueの数を複数選択したい場合は『Not In the list』を選択します。
In the listの使用例
例えば上記のように『配送希望先を都道府県から指定してください。』という選択式のフィールドがあるとし、その中のいくつかの県は配送不可だとします。
配送不可である県を選ぶと『ご指定の場所には配送できません。』というメッセージ（追加のフィールド）が出せるようにしたいとします。
要するにリストから複数の項目を別の追加フィールドへ分岐させたい時にIn the listを使用します。
上記は『お住まいの地域には配送できません。』というMeta fieldの項目の設定サンプルです。
- Label: お住まいの地域には配送できません。
- Name/ID: not_delivery
- Field type: Text
- Default value: お住まいの地域には配送できません。
- Conditional Logic: オン
Field: 配送希望先を都道府県から指定してください。
Operator: In the list
Value(複数選択）: 青森 / 宮崎 / 北海道
これで都道府県のリストから『青森 / 宮崎 / 北海道』を指定したときだけ『お住まいの地域には配送できません。』が追加のカスタムフィールドに表示されるようになります。
『青森 / 宮崎 / 北海道』以外の都道府県を選択した場合は『お住まいの地域には配送できません。』は表示されません。
Not In the list
『Not In the list』は『Not Equal』と同じような仕様で、Conditional LogicのValueが複数選択可能になると考えてください。
くわしい例と説明は割愛させていただきます。
まとめ
Conditional Logicは複雑な設計であるのに、設定してみると思いのほかそんなにむずかしくありませんね。
まず2つの関連する質問のMeta fieldを作成して、追加質問に当たるfieldでConditional Logicをオンにして各種設定をしてください！
そしておそらくみなさんがConditional Logicの設定で少し混乱する部分はOperatorの『Equal / Not Equal / In the list / Not In the list』ではないでしょうか。
その時は以下を基準に覚えると簡単です！
| Operator | Conditional Logicが作動するリスト数 | Conditional Logicによる追加フィールドの開閉 |
| Equal | 1つ | 開く |
| Not Equal | 1つ | 閉じる |
| In the list | 複数 | 開く |
| Not In the list | 複数 | 閉じる |
JetEngineのConditional Logicは、ユーザーにより異なる答えになる質問を、個々のユーザーに適したフィールドだけを表示していくことができるので、ユーザーにとってとても親切ですし見た目にも無駄がありません。
Jet EngineのConditial Logicでサイトのスペック上げちゃってください！
かっこいいWebサイト制作にぜひ役立ててくださいね。
この記事ではConditional Logicの機能・使い方のみを紹介しましたが、 Conditional LogicはMeta fieldsの設定の一部です。
『JetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズ』の記事でMeta fields全体の機能を紹介していますので、よかったら参考にしてくださいね！
JetEngineは機能がありすぎるので操作に迷うこともときにはあると思います。
そんなときはJetEngineの使い方完全ガイドをご覧ください！
JetEngineで一体何ができるのか、使い方から構造までを一挙に紹介しています。
きっと答えが見つかるはずですよ！