The current article

Contact Form 7で、ラジオボタンの選択値によって内容を表示・非表示切り替えするjQuery

WordPressのお問い合わせでよく使われるプラグインのコンタクトフォーム7で、 ラジオボタンの値によって、フォームの一部を「表示・非表示」してみました。
条件によって入力項目を増やしたい時に使えるんじゃないでしょうか。

radio_button

capture

契約者の住所と請求の送り先が違う場合の例で説明してみます。

CF7 タグの作成

まず、コンタクトフォーム7の編集画面で、
タグの作成からラジオボタンを選択し、
・名前を「other-forms」
・選択項目を「異なる」「同一」
としたとします。
「このコードをコピーして、左のフォーム内にペーストしてください。」のショートコードをコピーしてください。

cf7_radio

CF7 フォーム本文

<table id="slide-form">
	<tr>
		<th><span class="ess">請求送付先が契約者住所と</span></th>
		<td>[radio other-forms "異なる" "同一"]</td>
	</tr>
</table>
<table id="form-corp">
	<tr>
		<th><span class="ess">請求送付先の企業名</span></th>
		<td>[text your-company]</td>
	</tr>
	<tr>
		<th><span class="ess">請求送付先の住所</span></th>
		<td>[text your-address]</td>
	</tr>
	・
	・
	・
</table>

コンタクトフォーム7の本文部分に上記のように記入していきます。
最初のテーブル(4行目)に、タグの作成でコピーしたものを貼り付けています。
2つ目のテーブル(7行目以下)が、表示・非表示される部分となります。

JS

jQuery(function($) {
    $('input[type=radio]').change(function() {
        $("#form-corp").after().hide();
 
        if ($("input:radio[name='other-forms']:checked").val() == "異なる") {
            $('#form-corp').slideToggle('slow');
        } else if($("input:radio[name='other-forms']:checked").val() == "同一") {
            $('#form-corp').after().hide();
        }
    }).trigger('change'); 
});

上記が、表示非表示切り替えのスクリプトになります。
簡単な説明ですが、
3行目 まず「#form-corp」要素を非表示
5行目 ラジオボタンの「異なる」がクリックされたら
6行目 「#form-corp」要素を表示
7行目 ラジオボタンの「同一」がクリックされたら
8行目 「#form-corp」要素を非表示
となります。

上記を「slide-form.js」という名前をつけて、
テーマのjsフォルダに格納した場合、
header.phpに

<?php
 wp_enqueue_script('slide-form',get_bloginfo('template_url') . '/js/slide-form.js', array('jquery'));
?>

のような形で読み込ませてください。
これで完了(^^)

完成イメージ

radio_form1

「異なる」をクリックすると

radio_form2

注意

JSで簡易的に非表示にしているだけなので、非表示部分に必須項目がつかえませんね(ToT)
中途半端ですみません・・
ラジオボタン自体は必須に出来るので、また次回にでも。

以上で、ラジオボタンの選択値によって内容を表示・非表示切り替え出来たと思います。
チェックボックスでも良かったのですが、二者択一にしたかったもので。。
例ではテーブルを使用していますが、他も切り替えれると思いますので使ってみてくださいー
コード間違ってたらすみません^^;


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。