コンタクトフォーム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 "ラベル１"]
[checkbox checkbox-002 class:colorGroup  id:show_info2  "ラベル2"]

以上で、チェックボックスをクリックすると、divの非表示領域が表示されます。 また他のチェックボックスにチェックを変えると、連動して、表示領域が切り替わると思います。 あとは応用で、どのようにでもなるかと思います。

サクッとまとめてますが、このフォームページ作成でなかなか一日がかりです。

それでは GOOD WEB LIFE!