MW WP Formでの条件分岐フォームのつくりかた

2019年11月20日 Webのお困りごと

さて、今回は、先日実装した条件分岐メールフォームについてです。 MW WP Formでの条件分岐フォームの実装方法です。条件分岐フォームとは、選択肢によって出てくる項目が変わるメールフォームです。 ★ポイントは、・入力画面の項目の開閉・必須のON,OFF ・確認画面の表示内容・返信メールの出し分け今回は、上３つについて書いていきます。ラジオボタンの選択肢によって内容が開閉するメールフォームを作成いたしました。 1.メールフォームをtableで作成します。 そのとき、選択肢によって開閉するtrにクラス名open_trを付けます。 2.ラジオボタンの選択肢にchildren=”1:なし,2:ひらく”番号をつけます。 3.読み込んでいるjsファイルに以下の記述をします。 【jsファイル】

$(function() {
    $('[name="***"]:radio').change(function() {//name=""の中には、ラジオボタンのnameをいれます
        $(".open_tr").hide();
        if ($("input:radio[name='***']:checked").val() == "2") {//2のひらくを選んだ場合の記述
            $('.open_tr').show();
        } else if($("input:radio[name='***']:checked").val() == "1") {//1のなしを選んだ場合の記述
            $("input[name='***']").val("");
            $("select[name='***']").val("0");
        }
    }).trigger('change'); 
});

$(function() {

$('[name="***"]:radio').change(function() {//name=""の中には、ラジオボタンのnameをいれます

$(".open_tr").hide();

if ($("input:radio[name='***']:checked").val() == "2") {//2のひらくを選んだ場合の記述

$('.open_tr').show();

} else if($("input:radio[name='***']:checked").val() == "1") {//1のなしを選んだ場合の記述

$("input[name='***']").val("");

$("select[name='***']").val("0");

}

}).trigger('change');

});

次に、開閉する項目が必須事項だった場合。読み込んでいるfunctions.phpに下記を追記してください。 【functions.php】

/**
 * my_validation_rule
 * @param object $Validation
 * @param array $data
 * @param MW_WP_Form_Data $Data
 * $Validation::set_ruleの引数は name属性値, バリデーション名, オプション
 */
function my_validation_rule( $Validation, $data, $Data ) {
    if( $data['***'] === '2' ){//ラジオボタンのnameを***の部分に入れる。2を選んだ場合の記述
        $Validation-&gt;set_rule( '***', 'noEmpty' );//開閉する項目のnameを***の部分に入れる。以下、必要な分だけ記述
        $Validation-&gt;set_rule( '***', 'noEmpty' );
    }
    return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-***', 'my_validation_rule', 10, 3 );//メールフォームのフォームキーの番号を***の部分に入れる

/**

* my_validation_rule

* @param object $Validation

* @param array $data

* @param MW_WP_Form_Data $Data

* $Validation::set_ruleの引数は name属性値, バリデーション名, オプション

function my_validation_rule( $Validation, $data, $Data ) {

if( $data['***'] === '2' ){//ラジオボタンのnameを***の部分に入れる。2を選んだ場合の記述

$Validation->set_rule( '***', 'noEmpty' );//開閉する項目のnameを***の部分に入れる。以下、必要な分だけ記述

$Validation->set_rule( '***', 'noEmpty' );

}

return $Validation;

}

add_filter( 'mwform_validation_mw-wp-form-***', 'my_validation_rule', 10, 3 );//メールフォームのフォームキーの番号を***の部分に入れる

ここまでで、出し分けのメールフォームの入力画面の処理が終わりました。続いては確認画面。確認画面もjsにて非表示にします。 1.ラジオボタンが入るtableタグのtdタグに#radio_boxというID名を付けます。 2.読み込んでいるjsファイルに以下のコードを追記します。 【jsファイル】

jQuery(function($){
var area = ($('.mw_wp_form_confirm #radio_box').html());//
console.log(area)//consoleにarea内の内容を吐き出しています→私のデバッグ用
if ( area.indexOf('なし') != -1) {
$('.open_tr').css('display','none');
}
});

jQuery(function($){

var area = ($('.mw_wp_form_confirm #radio_box').html());//

console.log(area)//consoleにarea内の内容を吐き出しています→私のデバッグ用

if ( area.indexOf('なし') != -1) {

$('.open_tr').css('display','none');

}

});

確認画面に移行した際、フォームのdivにmw_wp_form_confirmというクラス名が付くため、中に入っている#radio_boxの中にラジオボタンで選んだ項目‘なし’が入れば、open_trを非表示にするという記述です。最初書いて動かなかったとき、consol.logにて、検証していませんでした。「絶対入ってるもん」という思い込みでやっていたのですが、なんと、検証したところ入っていない・・・！ .htmlでhtmlを取得していませんでした 😥 検証の大切さと、思い込みの危険さを改めて実感したのでした。下記のサイト様を参考にさせていただきました。ありがとうございます。選択肢によって入力項目が開閉するフォームの作り方（MW WP FORM編） WordPressのお問い合わせフォームプラグイン「MW WP Form」で、チェック・ラジオの選択項目によってテキストボックスを必須にする条件分岐の方法。

ご相談やご依頼は
こちらからご連絡ください

３営業日以内に担当者より返信いたします
ささいな事でもお気軽にお問い合わせください

MW WP Formでの条件分岐フォームのつくりかた

こんな記事も読まれています

ご相談やご依頼はこちらからご連絡ください

ご相談やご依頼は
こちらからご連絡ください