MW WP Form | 確認画面と完了ページで特定要素を非表示にする方法

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

コメント

タイトルとURLをコピーしました