Contact form thank you message

layouts/partials/scripts/contact.min.js

@@ -1 +1,91 @@
-$("#form-contact").addEventListener("submit",function(e){e.preventDefault();var t=$("input[name=name]").value,a=$("input[name=email").value,n=$("input[name=_subject").value,s=$("textarea[name=message]").value,i=new XMLHttpRequest,m={name:t,_replyto:a,email:a,_subject:n,message:s};i.open("POST","https://formspree.io/{{ .Site.Params.email }}",!0),i.setRequestHeader("Content-Type","application/json; charset=UTF-8"),i.send(JSON.stringify(m))});
+$('#form-contact').addEventListener('submit', function(e) {
+  e.preventDefault();
+
+  // Store form field values
+  var name = $("input[name=name]").value;
+  var email = $("input[name=email").value;
+  var subject = $("input[name=_subject").value;
+  var message = $("textarea[name=message]").value;
+
+  // AJAX request
+  var request = new XMLHttpRequest();
+  var data = {
+    name:name,
+    _replyto:email,
+    email:email,
+    _subject:subject,
+    message:message,
+  }
+
+  // Send to Formspree
+  request.open('POST', 'https://formspree.io/{{ .Site.Params.email }}', true);
+  request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+  // Call function when the state changes
+  request.onreadystatechange = function() {
+    if (request.readyState == 4 && request.status == 200) {
+      console.log(request.responseText);
+
+      // Reset form
+      $('#form-contact').reset();
+
+      var submit = $('#form-submit');
+      var thanks = $('#form-thankyou');
+
+      function thankYouFadeIn() {
+        // Fade out submit button
+        submit.visibility = 'hidden';
+        submit.classList.add('hide');
+        submit.classList.remove('show');
+
+        // Fade in thank you message
+        thanks.visibility = 'visible';
+        thanks.classList.add('show');
+        thanks.classList.remove('hide');
+        setTimeout(thankYouFadeOut, 4000);
+      };
+
+      function thankYouFadeOut() {
+        // Fade out thank you message
+        thanks.visibility = 'hidden';
+        thanks.classList.add('hide');
+        thanks.classList.remove('show');
+
+        // Fade in submit button
+        submit.visibility = 'visible';
+        submit.classList.add('show');
+        submit.classList.remove('hide');
+      };
+
+      thankYouFadeIn();
+    }
+  }
+  request.send(JSON.stringify(data));
+
+
+  // $.ajax({
+  //   url:"https://formspree.io/{{ .Site.Params.email }}",
+  //   method:"POST",
+  //   data:{
+  //     name:name,
+  //     _replyto:email,
+  //     email:email,
+  //     _subject:subject,
+  //     message:message,
+  //   },
+  //   dataType:"json",
+  //   success:function() {
+  //     console.log("Form successfully sent");
+  //     // Reset form
+  //     $("#form-contact").get(0).reset();
+  //     // Fade out submit button, fade in thank you message, then fade out message and fade in submit button
+  //     $("#form-submit").fadeOut(function(){
+  //       $("#form-thankyou").fadeIn(function(){
+  //         $("#form-thankyou").delay(4000).fadeOut(function(){
+  //           $("#form-submit").fadeIn();
+  //         });
+  //       });
+  //     });
+  //   }
+  // });
+
+});