選択内容に応じて確認画面の表示を変更する。プラグイン:MW WP FORMを利用した問い合わせフォームカスタマイズ

こんにちは。㈱シンラウンド代表の中島 達(@NakajimaSatoru)です。

入力フォームを作成する際に、ラジオボタンなどで選択した項目に応じて、入力してもらう項目を変えるといったことは多いかと思います。

MW WP FORMを利用した場合には、

  • 確認画面
  • 完了画面

を作成することが出来ます。

これらの確認画面、完了画面に関しても、選択した内容に合わせて非表示にする方法をご紹介します。

実現したい形

確認画面にて、リアルセミナーを選択している時には、

  • 参加希望日
  • 懇親会の参加

を表示する。

オンラインセミナーを選択している時には、上記2項目を表示しない。

実現方法

実現に関しては、以下作業を行います。

  1. フォームの作成
  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の次に有名なお問い合わせフォームを作成するためのプラグインです。

そのため、機能やカスタマイズの幅も広く、様々なことが出来ますので、是非利用してみてください。

投稿者プロフィール

中島 達(Nakajima Satoru)
中島 達(Nakajima Satoru)
株式会社Synround 代表取締役

「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。

web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。

過去の事業:Webサービス×2、レンタルスペース5店舗

ABOUTこの記事をかいた人

株式会社Synround 代表取締役 「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。 web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。 過去の事業:Webサービス×2、レンタルスペース5店舗