Как добавить Google reCAPTCHA в HTML-форму

const formValidationModule = (() => {

    const success = 200;
    const error = 400;

    function onPhoneInput(e) {
        let input = e.target;
        let value = input.value.replace(/\D/g, ''); // Оставляем только цифры

        if (value.startsWith('8')) {
            value = '7' + value.slice(1); // Преобразуем 8 в 7
        }

        if (!value.startsWith('7')) {
            value = '7' + value; // Всегда начинаем с 7
        }

        let formatted = '+7 ';

        if (value.length > 1) { // (999)
            formatted += '(' + value.substring(1, 4);
        }
        if (value.length >= 4) {
            formatted += ') ' + value.substring(4, 7);
        }
        if (value.length >= 7) {
            formatted += ' ' + value.substring(7, 9);
        }
        if (value.length >= 9) {
            formatted += '-' + value.substring(9, 11);
        }

        input.value = formatted;
    }

    function onPhoneFocus(e) {
        if (!e.target.value) {
            e.target.value = '+7 ';
        }
    }

    function onPhoneBlur(e) {
        const value = e.target.value;
        if (value === '+7 ' || value.length < 18) {
            e.target.value = '';
        }
    }

    function onPhoneKeyDown(e) {
        // Разрешаем только цифры, Backspace, Delete, стрелки
        if (
            e.key.length === 1 &&
            !/[0-9]/.test(e.key)
        ) {
            e.preventDefault();
        }
    }

    return {

        checkValid: function (form) {
            if (!form.checkValidity()) {
                const invalidFields = Array.from(form.elements).filter(el => {
                    if (!el.validity.valid) {
                        return !el.validity.valid;
                    }
                });

                this.addErrorMessages(invalidFields, form.id);
                return false;
            }

            // Если валидно возвращаем данные формы
            const formData = new FormData(form);
            return formData;
        },

        submitHandler: function (...args) {
            const formEl = document.getElementById(args[0]);

            // Сохранить контекст this через стрелочную функцию
            formEl.addEventListener('submit', async (e) => {
                e.preventDefault(); // отменяем стандартную отправку формы

                const formTarget = e.target;
                const dataFields = this.checkValid(formTarget);
                if (dataFields) {
                    const response = await this.fetch(args[0], args[1], dataFields);
                }
            });
        },

        fetch: async function (...args) {

            try {
                const response = await fetch(args[1], {
                    method: 'POST',
                    body: args[2], // dataFields
                    // Если сервер ожидает JSON, нужно собрать JSON из formData и указать заголовок:
                    // headers: { 'Content-Type': 'application/json' },
                    // body: JSON.stringify(Object.fromEntries(formData.entries())),
                });
                if (!response.ok) {
                    throw new Error(`Ошибка сервера: ${response.status}`);
                }

                // или response.text() в зависимости от ответа
                const result = await response.json();

                if (result.code == success) {

                    // Чистим поля формы
                    const formEl = document.getElementById(args[0]);
                    formEl.reset();
                }

                console.log(`result ${result.code}: ${result.message}`);
                alert(`${result.message}`);

            } catch (error) {
                console.log(`Ошибка отправки: ${error.message}`);
            }
        },

        phoneMask: function (phone) {
            const phoneInput = document.getElementById(phone);
            if (phoneInput) {
                phoneInput.addEventListener('input', onPhoneInput);
                phoneInput.addEventListener('focus', onPhoneFocus);
                phoneInput.addEventListener('blur', onPhoneBlur);
                phoneInput.addEventListener('keydown', onPhoneKeyDown);
            }
        },

        addErrorMessages: function (invalidFields, formId) {
            const messages = invalidFields.map(field => {

                if (field.validity.valueMissing) {
                    let errorStr = document.querySelector(`.${formId}__error-message.${formId}__error-message--${field.name}`);
                    if (errorStr) {
                        errorStr.innerHTML = '<span>Необходимо заполнить поле</span>';
                    }
                }

                if (field.validity.typeMismatch) {
                    let errorStr = document.querySelector(`.${formId}__error-message.${formId}__error-message--${field.name}`);
                    if (errorStr) {
                        errorStr.innerHTML = '<span>Неверный формат</span>';
                    }
                }

                if (field.validity.tooShort) {
                    let errorStr = document.querySelector(`.${formId}__error-message.${formId}__error-message--${field.name}`);
                    if (errorStr) {
                        errorStr.innerHTML = '<span>Слишком короткое значение</span>';
                    }
                }

            });
        },

        cleanErrorMessages: function (formId) {
            const formEl = document.getElementById(formId);
            formEl.addEventListener('input', (event) => {
                const field = event.target;
                let errorStr = document.querySelector(`.${formId}__error-message.${formId}__error-message--${field.name}`);
                if (errorStr) {
                    errorStr.innerHTML = '';
                }
            });
        },

        init: function (...args) {
            this.submitHandler(args[0], args[2]);
            this.cleanErrorMessages(args[0]);
            this.phoneMask(args[1]);
        }
    }

})();

function onRecaptchaLoadCallback() {

    const form = formValidationModule;

    if (document.getElementById('myform-g-recaptcha')) {
        const recaptchaWidgetId = grecaptcha.render('myform-g-recaptcha', {
            'sitekey': 'ВАШ_SITE_KEY'
        });
        /*
        1. id формы - myform
        2. Маска для телефона (передаём название name input-a). Отключить маску: false
        3. Валидация клиента recaptchaWidgetId. 
        4. Путь к отправщику: /ajax/form.php
        */
        form.init('myform', 'phone', '/ajax/form.php');
    }

}