入力フォームを作成する際に、ラジオボタンなどで選択した項目に応じて、入力してもらう項目を変えるといったことは多いかと思います。
MW WP FORMを利用した場合には、
- 確認画面
- 完了画面
を作成することが出来ます。
これらの確認画面、完了画面に関しても、選択した内容に合わせて非表示にする方法をご紹介します。
実現したい形
確認画面にて、リアルセミナーを選択している時には、
- 参加希望日
- 懇親会の参加
を表示する。
オンラインセミナーを選択している時には、上記2項目を表示しない。
実現方法
実現に関しては、以下作業を行います。
- フォームの作成
- jQueryの追記
ポイントと参考コードを順にご紹介します。
1.フォームの作成
まずは、通常通りフォームを作成します。
その際に、開閉する項目に関しては、別途class名を付与してください。（今回の例ですと、offline-opとonline-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($){
var area = ($('.mw_wp_form_confirm .participate').html());
if ( area.indexOf('リアルセミナー') != -1) {
$('.offline-op').show();
$('.online-op').hide();
}
if ( area.indexOf('オンラインセミナー') != -1) {
$('.offline-op').hide();
$('.online-op').show();
}
});
この際に、
var area = ($('.mw_wp_form_confirm .participate').html());
のmw_wp_form_confirmをmw_wp_form_completeに変更することで、送信完了画面の表示を変えることも出来ます。
まとめ
プラグイン：MW WP FORMに関しては、contact form 7の次に有名なお問い合わせフォームを作成するためのプラグインです。
そのため、機能やカスタマイズの幅も広く、様々なことが出来ますので、是非利用してみてください。
投稿者プロフィール
こんにちは。㈱シンラウンド代表の中島 達（@NakajimaSatoru）です。