Conditional Fields for Contact Form 7が動作しなかった時の対処（ChatGPT）

バージョン

Conditional Fields for Contact Form 7　バージョン 2.4.12
Contact Form 7　バージョン 5.9.5

対処法（ChatGPT）

ContactForm7

<table>
<tr>
    <th>手段<span class="must">※必須</span></th>
    <td>[select* group-menu "選択してください" "配送" "郵送" "お届け"]</td>
</tr>

[group email-delivery clear_on_hide]
　配送の内容
[/group]

[group post-delivery clear_on_hide]
　郵送の内容
[/group]

[group delivery-delivery clear_on_hide]
　お届けの内容
[/group]
</table>

ここまでは通常の設定。条件付きフィールドの設定も行って動作確認をしたが動かない。

やったこと

• バージョンの変更

• 他プラグインの停止

• 関係のないjavascriptの停止

• jQueryのバージョン変更

いろいろやってみましたが、動作しませんでした。
そこでChatGPTで対処法を質問。

javascript

ここからが対処法。フォームの下に以下を追加したら解決しました。

<script>
$(document).ready(function() {
    function updateVisibility() {
        var value = $('select[name="group-menu"]').val();
        $('.email-delivery').hide();
        $('.post-delivery').hide();
        $('.delivery-delivery').hide();

        if (value === '配送') {
            $('.email-delivery').show();
        } else if (value === '郵送') {
            $('.post-delivery').show();
        } else if (value === 'お届け') {
            $('.delivery-delivery').show();
        }
    }

    $('select[name="group-menu"]').on('change', updateVisibility);
    updateVisibility(); // 初期状態の更新
});
</script>

追記

解決したかと思ったら、問題が発生、group内の項目は全て必須項目。隠れた必須項目は記入していないため、送信出来ませんでした。そこでChatGPTで対処法をさらに質問。

対処法

javascriptの変更

<script>
$(document).ready(function() {
    function updateVisibility() {
        var value = $('select[name="group-menu"]').val();
        $('.email-delivery').hide();
        $('.post-delivery').hide();
        $('.delivery-delivery').hide();

        // 必須クラスをリセット
        $('input, select, textarea').removeClass('wpcf7-validates-as-required');
        $('.wpcf7-not-valid-tip').remove();

        if (value === '配送') {
            $('.email-delivery').show();
            $('input[name="email-company"], input[name="email-department"]').addClass('wpcf7-validates-as-required');
        } else if (value === '郵送') {
            $('.post-delivery').show();
            $('input[name="address-post"], input[name="post-company"], input[name="post-department"]').addClass('wpcf7-validates-as-required');
        } else if (value === 'お届け') {
            $('.delivery-delivery').show();
            $('input[name="address-delivery"], input[name="company-delivery"], input[name="date-delivery"]').addClass('wpcf7-validates-as-required');
        }
    }

    $('select[name="group-menu"]').on('change', updateVisibility);
    updateVisibility(); // 初期状態の更新

    // フォーム送信前にバリデーションを再評価
    $('form.wpcf7-form').on('submit', function(event) {
        updateVisibility(); // 送信時に再評価

        var invalidFields = $('.wpcf7-validates-as-required').filter(function() {
            return !$(this).val();
        });

        if (invalidFields.length > 0) {
            event.preventDefault(); // フォーム送信をキャンセル

            // 各フィールドにエラーメッセージを追加
            invalidFields.each(function() {
                if (!$(this).next('.wpcf7-not-valid-tip').length) {
                    $(this).closest('.wpcf7-form-control-wrap').append('<span class="wpcf7-not-valid-tip">このフィールドを入力してください。</span>');
                }
                $(this).addClass('wpcf7-not-valid');
            });
        }
    });
});
</script>

Contactform7の必須のclass wpcf7-validates-as-requiredが入るように修正したが、デフォルトのエラーメッセージが出ない。必須なのに未記入で送信出来てしまうという状況。そこで以下を追加。

php

テーマの inc ディレクトリに cf7-custom-validation.php という名前のファイルを作成し、以下のコードを追加します。

<?php
defined( 'ABSPATH' ) || exit;

add_filter( 'wpcf7_validate_text', 'custom_validation_text', 20, 2 );
add_filter( 'wpcf7_validate_text*', 'custom_validation_text', 20, 2 );

function custom_validation_text( $result, $tag ) {
    $name = $tag->name;
    $value = isset( $_POST[$name] ) ? trim( $_POST[$name] ) : '';
    $group_menu = isset( $_POST['group-menu'] ) ? $_POST['group-menu'] : '';

    if ( $group_menu === '配送' ) {
        if ( $name == 'email-company' && empty( $value ) ) {
            $result->invalidate( $tag, "会社名を入力してください。" );
        }
        if ( $name == 'email-department' && empty( $value ) ) {
            $result->invalidate( $tag, "部署名を入力してください。" );
        }
    }

    if ( $group_menu === '郵送' ) {
        if ( $name == 'address-post' && empty( $value ) ) {
            $result->invalidate( $tag, "住所を入力してください。" );
        }
        if ( $name == 'post-company' && empty( $value ) ) {
            $result->invalidate( $tag, "会社名を入力してください。" );
        }
        if ( $name == 'post-department' && empty( $value ) ) {
            $result->invalidate( $tag, "部署名を入力してください。" );
        }
    }

    if ( $group_menu === 'お届け' ) {
        if ( $name == 'address-delivery' && empty( $value ) ) {
            $result->invalidate( $tag, "住所を入力してください。" );
        }
        if ( $name == 'company-delivery' && empty( $value ) ) {
            $result->invalidate( $tag, "会社名を入力してください。" );
        }
        if ( $name == 'date-delivery' && empty( $value ) ) {
            $result->invalidate( $tag, "打設予定日を入力してください。" );
        }
    }

    return $result;
}

functions.php

functions.php ファイルに以下の行を追加して、このカスタムバリデーションファイルを読み込みます。

require_once( get_template_directory() . '/inc/cf7-custom-validation.php' );

かなり強引な感じですが、これで動作しました。
他に対処法ありましたら、ご教授ください。