プラグイン:Contact Form 7を利用した選択内容に応じて入力項目が開閉するフォームの作り方

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

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

そこで今回は、プラグイン:MW WP FORMを利用し、実現する方法をご紹介します。

実現したい形

「スタジオのレンタル」にチェックが入っている時には、

  • ご希望内容
  • ご利用・内見 希望日時

を表示する

「スタジオのレンタル」にチェックが入っていない時には、上記2項目を表示しない

実現方法

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

  1. フォームの作成
  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はお問い合わせフォームを作成するプラグインとしては非常に簡単に様々な事ができますので、是非利用してみてください。

投稿者プロフィール

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

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

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

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

ABOUTこの記事をかいた人

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