MW WP Form の確認ページや完了ページで特定要素を非表示にしたい場合は、それぞれの画面で出力されるユニークなクラスを指定して jQuery & CSS で非表示にします。
サンプル
対象要素
今回は個人情報の同意を促すメッセージの要素を非表示にたいと思います。
<p class="privacy-check">「個人情報保護方針」 を必ずご一読いただき 「同意する」 にチェックを入れ、お問い合せください。</p>
コード
“footer.php” 等に対象フォームなど特定ページのみで出力される下記コードを追加します。
<?php if( is_page( array('contact', 'event') ) ):?>
<script type="text/javascript">
if($('.mw_wp_form_confirm, .mw_wp_form_complete').length) {
$('.privacy-check').css('display', 'none');
}
</script>
<?php endif;?>
上記サンプルでは、jQueryのlengthプロパティで確認ページと完了ページ用のクラスが存在するかをチェックし存在する場合は、メッセージの要素に動的にCSSを追加して非表示にしています。
MW WP Form の各ページで出力されるクラス
クラス
出力ページ | クラス |
入力ページ | mw_wp_form_input |
確認ページ | mw_wp_form_confirm |
完了ページ | mw_wp_form_complete |
※入力・確認・完了ページを分けても分けなくても各ステップでクラスが切り替わります
出力されるソース上のクラス
出力ページ | クラス |
入力ページ | class=”mw_wp_form mw_wp_form_input” |
確認ページ | class=”mw_wp_form mw_wp_form_confirm” |
完了ページ | class=”mw_wp_form mw_wp_form_complete” |
動作確認環境
エックスサーバー(x10) PHP 7.2.17 MySQL 5.7 WordPress 5.3.2 MW WP Form 4.2.0
コメント