<script type=“text/javascript” >

const contactFormElement = document.getElementById("{{ include.form_id | default: 'contact-form' }}");
const nameInputElement = document.getElementById("{{ include.name_input_id | default: 'contact-name' }}");
const emailInputElement = document.getElementById("{{ include.email_input_id | default: 'contact-email' }}");
const messageInputElement = document.getElementById("{{ include.message_input_id | default: 'contact-message' }}");
const submitInputElement = document.getElementById("{{ include.submit_input_id | default: 'contact-submit-button' }}");
const modalWindowElement = document.getElementById("{{ include.modal_window_id | default: 'modal-recaptcha-window' }}");
var recaptchaWidget;

const isInputValid = function() {
    return (nameInputElement.checkValidity()
        && emailInputElement.checkValidity()
        && messageInputElement.checkValidity())
};

const disableSubmitInputElement = function (disabled = true) {
    submitInputElement.disabled = disabled;
}

const {{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }} = function() {
    if (isInputValid()) {
        disableSubmitInputElement(false);
    } else {
        disableSubmitInputElement();
    }
};

const showModalWindow = function() {
    modalWindowElement.classList.add('visible');
    modalWindowElement.classList.add('loaded');
    modalWindowElement.focus();
}

const hideModalWindow = function() {
    modalWindowElement.classList.remove('loaded');
    modalWindowElement.classList.remove('visible');
    contactFormElement.focus();
}

const {{ include.onsubmit_callback | default: 'processContactRequest' }} = function() {
    if (grecaptcha.getResponse(recaptchaWidget).length > 0) {
        sendContactMessage();
        hideModalWindow();
        resetContactForm();
        grecaptcha.reset();
    } else {
        showModalWindow();
    }
};

const {{ include.onreset_callback | default: 'resetContactForm' }} = function() {
    contactFormElement.reset();
    disableSubmitInputElement();
};

const sendContactMessage = function() {
    const data = {
        name: encodeURIComponent(nameInputElement.value),
        email: encodeURIComponent(emailInputElement.value),
        message: encodeURIComponent(messageInputElement),
        token: grecaptcha.getResponse(recaptchaWidget)
    };

    fetch("{{ '/contact' | absolute_url }}", {
        method: 'POST',
        mode: 'same-origin',
        headers: {'Content-Type': 'application/json',},
        body: JSON.stringify(data),
    })
    .then((response) => {
        alert('Message sent!');
    })
    .catch((error) => {
        console.error('Error:', error);
    });
};

var onloadCallback = function() {
    recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | default: 'recaptcha-checkbox' }}', {
        'sitekey' : '{{ site.recaptcha.sitekey }}',
        'theme' : 'dark',
        'size' : 'compact',
        'callback' : processContactRequest
    });
};

modalWindowElement.addEventListener('click', hideModalWindow);
modalWindowElement.addEventListener('keyup', hideModalWindow);

</script> <script src=“www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit” async defer></script>