コンタクトフォーム7で択一チェックボックスをチェックして切り替えると、フォームの内容を一部切り替える
どうもD-Marking Design 渡辺です。
久々に専門的な事書きます。
今制作しているサイトで、お問合せ内容によって、フォームを少々切り替えたいという事になり、
色々探して、実装したので、ご紹介します。
チェックボックス択一選択 ▶ 非表示項目が切り替わる
参考url
http://ryus.co.jp/blog/jquerycheckboxonly1/
■チェックボックスを択一にするjQuery
http://ngns4.net/staff/contact-form7-でチェックを入れると入力欄が表示される/
■Contactform7 でチェックを入れると入力欄が表示されるようにする
http://oshiete.goo.ne.jp/qa/8908597.html
■jQueryのhide,showで中の要素がスライドしてしまう
まずはjクエリでチェックボックスを択一にするスクリプトを入れます。
<script type="text/javascript"> jQuery(function($){ $(function(){ $('.colorGroup input').on('click', function() { if ($(this).prop('checked')){ // 一旦全てをクリアして再チェックする $('.colorGroup input').prop('checked', false); //ここオリジナル ディスプレイnoneも入れる $(".show1").css("display", "none"); $(".show2").css("display", "none"); //ここまで チェックにて非表示領域と表示領域をかえるため //いっぱいあるならここに追加してく $(this).prop('checked', true); } }); }); }); </script>
そして今度はチェックボックスによって、ディスプレイnone を切り替えるスクリプト。 ただし、参考サイトのデフォルトのshow でやると横からスライドイン 横へスライドアウトしてしまう、show,hideの仕様なようです。 なのでかわりにanimateを使う。
<script type="text/javascript"> jQuery(document).ready(function($){ $(".show1").css("display", "none"); $(".show2").css("display", "none"); $("#show_info1").click(function(){ if($('#show_info1 [type="checkbox"]').is(':checked')) {$('.show1').animate({ height: 'show' }, "fast");}else{$('.show1').animate({ height: 'hide' },"fast");} }); $("#show_info2").click(function(){ if($('#show_info2 [type="checkbox"]').is(':checked')) {$('.show2').animate({ height: 'show' }, "fast");}else{$('.show2').animate({ height: 'hide' },"fast");} }); }); </script>
css ラベルけしてチェックボックスのみ
.colorGroup .wpcf7-list-item-label{ display:none}
html
<div class="show1"> 内容 </div> <div class="show2"> 内容 </div>
コンタクトフォーム
[checkbox checkbox-001 class:colorGroup id:show_info1 "ラベル1"] [checkbox checkbox-002 class:colorGroup id:show_info2 "ラベル2"]
以上で、チェックボックスをクリックすると、divの非表示領域が表示されます。 また他のチェックボックスにチェックを変えると、連動して、表示領域が切り替わると思います。 あとは応用で、どのようにでもなるかと思います。
サクッとまとめてますが、このフォームページ作成でなかなか一日がかりです。
それでは GOOD WEB LIFE!

1980.11.26生まれ 2児の父 愛娘家 趣味:料理 DIY
2000年、名古屋栄の東京デザイナー学院名古屋校(現名古屋デザイナー・アカデミー)を卒業。
グラフィックデザイン歴25年以上、WEB制作歴20年以上。
30歳で起業。起業前は音楽活動(HIPHOP)、看板屋(看板・店内サイン制作)、デザイン会社(WEB等制作)などを経験