[Contact Form 7]未入力の必須項目がある場合、送信ボタンを押せない様にする

フォーム内の必須項目に未入力があった場合、そもそも送信ボタンを押せなくしてしまおうというアイデア。

サンプル

使い方

以下のJavaScriptをフォームを設置したページに記載するだけです。

必須項目に未入力があった場合「送信ボタン」要素にdisabledを付与するため、disabled時のボタンデザイン等はCSSで設定してください。
（以下は例）

.wpcf7-submit:disabled {
    opacity: .5;
}

JavaScript

const required = document.querySelectorAll('.wpcf7-validates-as-required');
let requiredArray = {};
const submit = document.querySelector('.wpcf7-submit');

if (required.length > 0) {
    submit.disabled = true;
    required.forEach((el) => {
        if (el.value === '') {
            requiredArray[el.name] = false;
        }
        el.addEventListener('input', () => {
            if (el.value === '') {
                requiredArray[el.name] = false;
            } else if (requiredArray[el.name] === false) {
                delete requiredArray[el.name];
            }
            if (Object.keys(requiredArray).length === 0) {
                submit.disabled = false;
            } else {
                submit.disabled = true;
            }
        });
    });
}

解説

ContactForm7が必須項目に設定するクラス「wpcf7-validates-as-required」を利用します。（以下、必須要素）
最初に空の必須要素を変数「requiredArray」に連想配列としてそれぞれ設定します。

if (el.value === '') {
    requiredArray[el.name] = false;
}

必須要素に変更があるたびにその内容を確認し、空なら「requiredArray」に追加、入力されているなら「requiredArray」から削除を行います。
更に「requiredArray」の要素数を確認し、0になっていれば「submit」のdisabledを外します。

el.addEventListener('input', () => {
    if (el.value === '') {
        requiredArray[el.name] = false;
    } else if (requiredArray[el.name] === false) {
        delete requiredArray[el.name];
    }
    if (Object.keys(requiredArray).length === 0) {
        submit.disabled = false;
    } else {
        submit.disabled = true;
    }
});

補足

同じページに複数のフォームを設置する場合には変数・要素取得のそれぞれ行う必要があります。
入力されているかどうかをチェックするだけなので、バリデーションは行いません。
メールアドレス形式などで送信できなかった場合には「入力内容に問題があります〜」などの要素も表示されるため、適宜設定を行いましょう。

おまけ：警告文も一緒に表示する場合

わかりやすくするために送信ボタンの下に注意文を一緒に表示する方法です。

Contact Form 7のテンプレート編集で[submit]の下に以下のタグを挿入します。

<p class="wpcf7-required-attention">未入力の必須項目があります。</p>

JavaScriptにも少し追記します。

const required = document.querySelectorAll('.wpcf7-validates-as-required');
let requiredArray = {};
const submit = document.querySelector('.wpcf7-submit');
const attention = document.querySelector('.wpcf7-required-attention');

if (required.length > 0) {
    submit.disabled = true;
    attention.classList.add('active');
    required.forEach((el) => {
        if (el.value === '') {
            requiredArray[el.name] = false;
        }
        el.addEventListener('input', () => {
            if (el.value === '') {
                requiredArray[el.name] = false;
            } else if (requiredArray[el.name] === false) {
                delete requiredArray[el.name];
            }
            if (Object.keys(requiredArray).length === 0) {
                submit.disabled = false;
                attention.classList.remove('active');
            } else {
                submit.disabled = true;
                attention.classList.add('active');
            }
        });
    });
}