入力フォームを作成する際に、チェックボックスなどで選択した項目に応じて、入力してもらう項目を変えたいといったことは多いかと思います。
そこで今回は、プラグイン：MW WP FORMを利用し、実現する方法をご紹介します。
実現したい形
「スタジオのレンタル」にチェックが入っている時には、
- ご希望内容
- ご利用・内見 希望日時
を表示する
「スタジオのレンタル」にチェックが入っていない時には、上記2項目を表示しない
実現方法
実現に関しては、以下作業を行います。
- フォームの作成
- jQueryの追記
ポイントと参考コードを順にご紹介します。
1.フォームの作成
まずは、通常通りフォームを作成します。
その際に、開閉する項目に関しては、別途class名を付与してください。（今回の例ですと、class=”check-rental”としています。）
<table>
<tr>
<th>お問い合わせ内容<span class="requied">必須</span></th>
<td>[checkbox* checkbox-304 id:show-checkbox "スタジオのレンタル" "動画撮影/編集サポート" "ライブ配信サポート" "その他"]</td>
</tr>
<tr class="check-rental">
<th>ご希望内容</th>
<td>[radio radio-837 "ご予約確定" "内見" "その他ご質問"]</td>
</tr>
<tr class="check-rental">
<th>ご利用・内見<br>希望日時</th>
<td>[text text-806 placeholder "例：2020年5月17日"]</td>
</tr>
</table>
2.jQueryの追記
以下の例にならい、jQueryを追加します。
jQuery(document).ready(function($){
$(".check-rental").css("display", "none");
$("#show-checkbox span:first-child").click(function(){
if($('input:checkbox[value="スタジオのレンタル"]').is(':checked')) {$('.check-rental').show('fast');}else{$('.check-rental').hide('fast');}
});
});
まとめ
プラグイン：Contact Form 7はお問い合わせフォームを作成するプラグインとしては非常に簡単に様々な事ができますので、是非利用してみてください。
投稿者プロフィール
こんにちは。㈱シンラウンド代表の中島 達（@NakajimaSatoru）です。