<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' }}");
var recaptchaWidget;

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

const isRecaptchaValid = function() {
    var responseToken = grecaptcha.getResponse(recaptchaWidget);
    return true;
};

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

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

const {{ include.onsubmit_callback | 'sendContactMessage()' }} = function() {
    encodeURIComponent(nameInputElement.value);
    encodeURIComponent(emailInputElement.value);
    encodeURIComponent(messageInputElement.value);
};

var onloadCallback = function() {
    var verifyForm = function(response) {
        if (isInputValid() && isRecaptchaValid()) {
            disableSubmitInputElement(false);
        } else {
            disableSubmitInputElement();
        }
    };
    recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}', {
        'sitekey' : '{{ site.recaptcha.sitekey }}',
        'theme' : 'dark',
        'callback' : verifyForm,
        'expired-callback': disableSubmitInputElement
    });
};

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