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;}
