入力フォームを作成する際に、チェックボックスなどで選択した項目に応じて、入力してもらう項目を変えたいといったことは多いかと思います。
Contact Form 7の場合には、「Contact Form 7 Conditional Fields」という追加のプラグインを利用する事で簡単に実現できます。
そこで今回は、「Contact Form 7 Conditional Fields」の利用方法を含めた、選択内容に応じて入力項目が開閉するフォームの作り方をご紹介します。
Contact Form 7 Conditional Fieldsの利用方法
Contact Form 7 Conditional Fieldsを利用し、選択した項目に応じて入力項目を変えるためには、
- フォーム作成時の設定
- 表示・非表示の条件設定
- 自動配信メールの設定
を実施する必要があります。
フォーム作成時の設定
左メニュー[お問い合わせ]-[コンタクトフォーム]から、新規追加もしくは、変更を行うフォームを選択してください。
[フォーム]タブ[Conditional Fields Group]をクリック
各項目の設定を行い、[タグを挿入]を選択
基本的には、以下にチェックは不要です。
| Clear on hide | 一度非表示にした場合に、入力済みの内容を削除 |
| Inline | 表示した際に、display:inlineで表示する |
表示されたタグで、表示・非表示を切り替える項目を囲んでください。
[group group-88]
ここに、表示・非表示を切り替える項目
[/group]表示・非表示の条件設定
[Conditional fields]タブをクリック
+[add new Conditional rule]をクリック
以下に習い、条件の設定を行います。
「select fieldで選択した項目の値がvalueだった場合には、select groupを表示する」
もしくは、「select fieldで選択した項目の値がvalueではない場合には、select groupを表示する」
といった形になるように設定を行います。
| select field | フォーム内で予め作成した、チェックボックやラジオボタンを設定してください。 表示・非表示をを判断する項目になります。 |
| equals/not equals | equals:同じ equals:異なる |
| value | 項目を表示する場合の選択肢を設定します。 |
| select group | 実際に表示・非表示をが実行される項目を選択します。 |
自動配信メールの設定
通常時noContact form 7の設定と同様にメールの設定を行ってしまうと、本来必要の内項目までメールに記載され、送られてしまいます。
そこで、余計な項目が表示されないよう設定を行います。
設定方法に関しては、フォーム作成時と同様に[group]のタグで、条件に応じてメールの文面に掲載される箇所を囲んでください。
[group-88]
ここに、表示・非表示を切り替えるメールの文面
[/group]まとめ
このプラグインを利用することで、Contact form 7の場合には、簡単に「選択した項目に応じて入力してもらう項目を変える」といった事ができるようになります。
お問い合わせフォームに関しては、「サイトの改善は問い合わせフォームから」と言われるぐらい、お問い合わせへの影響が大きくなっています。
そのため、ユーザの利便性を考え、必要に応じて今回の様な設定をしてみてください。
投稿者プロフィール
こんにちは。㈱シンラウンド代表の中島 達（@NakajimaSatoru）です。