Contact Form 7 Multi-Step Formsの確認画面で条件により項目を非表示にする

Contact Form 7 Multi-Step Forms 確認画面でConditional Fields for Contact Form 7が使えないので条件によって項目を非表示する。
後で使いまわしが出来るようにプラグインを作成

確認画面でform-disp-checkクラスの値が「新規登録」以外の時、form-disp-targetクラスにno-dispクラスを追加する。

※本人の覚書きですので責任は持ちません。
間違いがありかもしれません。参考される方は自己責任でお願いします。

ContactForm7の設定画面

ContactForm7入力画面

<div class="entry-group">
<div class="entry-title">登録の種類</div>
<div class="entry-input">[select entry-type "新規登録" "再登録"]</div>
<div class="entry-title">共通項目</div>
<div class="entry-input">[text text1]</div>
<div class="entry-title">新規項目</div>
<div class="entry-input">[text text2]</div>
[submit "確認画面"][multistep multistep-step2 skip_save "確認画面のurl"]

確認画面(multistep-step2)

<div id="confirm-form" class="confirm-group">
<div class="entry-title">登録の種類</div>
<div class="entry-input form-disp-check">[multiform entry-type]</div>
<div class="entry-title">共通項目</div>
<div class="entry-input">[multiform text1]</div>
<div class="form-disp-target">
    <div class="entry-title">新規項目</div>
    <div class="entry-input">[multiform text2]</div>
</div>
[multistep multistep-step3 last_step send_email "サンキュー画面のurl"]

プラグイン(form_disp_change)

form_disp_change.php

function form_disp_change_load() {
	wp_enqueue_style('form-disp-change', plugin_dir_url( __FILE__). 'form-disp-change.css');
	wp_enqueue_script('form-disp-change',plugin_dir_url( __FILE__). 'form-disp-change.js',array(), '1.0.0',true );
}
add_action('wp_enqueue_scripts', 'form_disp_change_load');

form_disp_change.js

jQuery(function($) {
	var chkVal = new String("新規登録");
	var chk = $('#confirm-form .form-disp-chack p');
	//contactform7にpタグが入っていたので、とりあえずpタグまで
	var chkText = chk.text();
	var chkTrim = $.trim(chkText);
	//プルダウンの「新規項目」を取得した際、前後に空白があるようなのでトリミング

	if($('#confirm-form div').hasClass('form-disp-chack')) {
		if(chkTrim == chkVal ) {
			//.form-disp-targetクラスに .no-dispがあれば消す
			$('#confirm-form .form-disp-target').removeClass('no-disp');
		}else{
			//.form-disp-targetクラスに .no-dispを追加する
			$('#confirm-form .form-disp-target').addClass('no-disp');
		}
	}
});

form_disp_change.css

.no-disp {display: none;}


投稿日

カテゴリー:

投稿者:

タグ: