(function() { // get all data in form and return object function getFormData(form) { var elements = form.elements; var honeypot; var fields = Object.keys(elements).filter(function(k) { if (elements[k].name === "honeypot") { honeypot = elements[k].value; return false; } return true; }).map(function(k) { if(elements[k].name !== undefined) { return elements[k].name; // special case for Edge's html collection }else if(elements[k].length > 0){ return elements[k].item(0).name; } }).filter(function(item, pos, self) { return self.indexOf(item) == pos && item; }); var formData = {}; fields.forEach(function(name){ var element = elements[name]; // singular form elements just have one value formData[name] = element.value; // when our element has multiple items, get their values if (element.length) { var data = []; for (var i = 0; i < element.length; i++) { var item = element.item(i); if (item.checked || item.selected) { data.push(item.value); } } formData[name] = data.join(', '); } }); // add form-specific values into the data formData.formDataNameOrder = JSON.stringify(fields); formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name formData.formGoogleSend = form.dataset.email || ""; // no email by default return {data: formData, honeypot}; } function handleFormSubmit(event) { // handles form submit without any jquery event.preventDefault(); // we are submitting via xhr below var form = event.target; const submit_button = document.getElementById('submit-button'); submit_button.innerText = ''; const spinner = document.createElement('div'); submit_button.appendChild(spinner); spinner.classList.add('form-loader'); var formData = getFormData(form); var data = formData.data; // If a honeypot field is filled, assume it was done so by a spam bot. if (formData.honeypot) { return false; } disableAllButtons(form); var url = "https://script.google.com/macros/s/AKfycbzRIO0z87JKRFnk5c86nB47LMxzR0L2xuxOG0tyUMvxQyd0n9y1/exec"; var xhr = new XMLHttpRequest(); xhr.open('POST', url); // xhr.withCredentials = true; xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { form.reset(); var formElements = form.querySelector(".form-elements") if (formElements) { formElements.style.display = "none"; // hide form } submit_button.innerText = 'Submit'; spinner.classList.remove('form-loader'); let thankYouMessage = form.querySelector(".thankyou_message"); if (thankYouMessage) { thankYouMessage.style.display = "block"; } setTimeout(() => thankYouMessage.style.display = "none", 4000); return; }; // url encode form data for sending as post data var encoded = Object.keys(data).map(function(k) { return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]); }).join('&'); xhr.send(encoded); } function hideHoneyPot(nodelist) { nodelist.forEach(node => { if (node.name === "honeypot") { node.style.opacity = 0; } }) } function loaded() { console.log("Contact form submission handler loaded successfully."); // bind to the submit event of our form const form = document.querySelector("form.gform"); form.addEventListener("submit", handleFormSubmit, false); const inputs = form.querySelectorAll("input") hideHoneyPot(inputs); // for (var i = 0; i < forms.length; i++) { // forms[i].addEventListener("submit", handleFormSubmit, false); // } }; document.addEventListener("DOMContentLoaded", loaded, false); function disableAllButtons(form) { var buttons = form.querySelectorAll("button"); for (var i = 0; i < buttons.length; i++) { buttons[i].disabled = true; } } })();