WEBTODESIGN

【Contact Form 7】フォームに変更があった際にエラーメッセージを消す

フォームの送信ボタンを押した際に、エラーがあった時に出るエラー文。

フォームを入力し直しても出たままなので、利用者が混乱してしまう場合があります。

クライアントよりフォームを修正したら非表示にできないか…と依頼があったためメモ。

JavaScriptに追記

JavaScriptで、フォームの入力フィールドに変更があった場合にdisplay: noneで非表示にし、送信ボタンを押したら表示に戻す、という動作を追加しました。

/**
 * 
 * フォームのエラーメッセージをフォームに変更があった場合に消す
 * 
 */
document.addEventListener('DOMContentLoaded', function() {
    var wpcf7Forms = document.querySelectorAll('.wpcf7-form');
    wpcf7Forms.forEach(function(form) {
        // フォームの入力フィールドに変更があったときのイベントリスナー
        form.addEventListener('input', function() {
            // wpcf7-response-output要素のスタイルをクリア
            var responseOutput = form.querySelector('.wpcf7-response-output');
            if (responseOutput) {
                responseOutput.style.display = 'none';
            }
        });

        // フォームが送信されるイベント（wpcf7submit）のリスナーを追加
        form.addEventListener('wpcf7submit', function() {
            // 送信後にwpcf7-response-output要素のスタイルをリセット
            var responseOutput = form.querySelector('.wpcf7-response-output');
            if (responseOutput) {
                responseOutput.style.display = ''; // デフォルトの表示に戻す
            }
        });
    });
});

RECOMMENDATION

NEWEST