入力フォームを作成する際に、ラジオボタンなどで選択した項目に応じて、入力してもらう項目を変えたいといったことは多いかと思います。
そこで今回は、プラグイン：MW WP FORMを利用し、実現する方法をご紹介します。
実現したい形
リアルセミナーを選択している時には、
- 参加希望日
- 懇親会の参加
を表示する。
オンラインセミナーを選択している時には、上記2項目を表示しない
実現方法
実現に関しては、以下作業を行います。
- フォームの作成
- jQueryの追記
ポイントと参考コードを順にご紹介します。
1.フォームの作成
まずは、通常通りフォームを作成します。
その際に、開閉する項目に関しては、別途class名を付与してください。（今回の例ですと、class=”offline-op”としています。）
<dl class="participate">
<dt>参加方法</dt>
<dd>[mwform_radio name="participate" id="participate" value="1" children="1:リアルセミナー,2:オンラインセミナー"]</dd>
</dl>
<dl class="offline-op">
<dt>参加希望日</dt>
[mwform_radio name="participateDate" id="participateDate" children="2020年4月30日（新宿）,2020年5月5日（大阪）,2020年6月20日（福岡）" vertically="true"]
</dl>
<dl class="offline-op">
<dt>懇親会</dt>
<dd class="radio">[mwform_radio name="gathering" id="gathering" children="参加する,参加しない"]</dd>
</dl>
<dl>
<dt><label for="">名前(必須)</label></dt>
<dd>[mwform_text name="name" size="60"]</dd>
</dl>2.jQueryの追記
以下の例にならい、jQueryを追加します。
jQuery(function() {
jQuery('[name="participate"]:radio').change(function() {
jQuery(".offline-op").hide();
if (jQuery("input:radio[name='participate']:checked").val() == "1") {
jQuery('.offline-op').show();
}
}).trigger('change');
});なお、例では、
participate：参加方法
participateDate：参加希望日
gathering：懇親会
の項目となっております。
まとめ
プラグイン：MW WP FORMに関しては、contact form 7の次に有名なお問い合わせフォームを作成するためのプラグインです。
そのため、機能やカスタマイズの幅も広く、様々なことが出来ますので、是非利用してみてください。
投稿者プロフィール
こんにちは。㈱シンラウンド代表の中島 達（@NakajimaSatoru）です。