<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>