Only load or do things if necessary

assets/js/contact_form.js

@@ -1,29 +1,45 @@
-const ajaxUrl = '../php/contact_form.php';
-const contact_form = document.getElementsByClassName('content__contact_form')[0];
-const subject = document.getElementsByClassName('contact_form__subject')[0];
-const message = document.getElementsByClassName('contact_form__message')[0];
-const name = document.getElementsByClassName('contact_form__name')[0];
-const email = document.getElementsByClassName('contact_form__email')[0];
-const captcha = document.getElementsByClassName('contact_form__captcha')[0];
-const now = (new Date().getTime()/1000).toFixed();
-const feedback = document.getElementsByClassName('contact_form__feedback')[0];
+const contactFormAjaxUrl = '/php/contact_form.php';
 
-window.addEventListener('DOMContentLoaded', function(event) {
+window.addEventListener('DOMContentLoaded', function() {
+    const contact_form = document.getElementsByClassName('content__contact_form')[0];
+    if (contact_form) {
+        contact_form.addEventListener('submit', wtf_submitContactForm, false);
+        wtf_startContactFormSession();
+    }
+});
+
+function wtf_startContactFormSession() {
     let formData = new FormData();
     formData.append('action', 'start_session');
-    fetch(ajaxUrl, {
+    fetch(contactFormAjaxUrl, {
         method: 'POST',
         mode: 'same-origin',
         body: formData,
     })
-    .then(response => response.json())
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Response was not OK');
+        }
+
+        return response.json();
+    })
     .then(json => {
         console.log(json);
     })
-});
+    .catch(error => {
+        console.error('Could not start the session:', error);
+    });
+}
 
-contact_form.addEventListener('submit', function(event) {
+function wtf_submitContactForm(event) {
     event.preventDefault();
+
+    const subject = document.getElementsByClassName('contact_form__subject')[0];
+    const message = document.getElementsByClassName('contact_form__message')[0];
+    const name = document.getElementsByClassName('contact_form__name')[0];
+    const email = document.getElementsByClassName('contact_form__email')[0];
+    const captcha = document.getElementsByClassName('contact_form__captcha')[0];
+
     let formData = new FormData();
     formData.append('action', 'handle_form');
     formData.append('subject', subject.value);
@@ -39,13 +55,14 @@ contact_form.addEventListener('submit', function(event) {
         return;
     }
 
-    fetch(ajaxUrl, {
+    fetch(contactFormAjaxUrl, {
         method: 'POST',
         mode: 'same-origin',
         body: formData,
     })
     .then(response => response.json())
     .then(json => {
+        const feedback = document.getElementsByClassName('contact_form__feedback')[0];
         console.log(json);
         if (json.errors) {
             feedback.classList.remove('--success');
@@ -75,4 +92,4 @@ contact_form.addEventListener('submit', function(event) {
         }
     })
     .catch(error => console.log(error));
-}, false);
+}

assets/js/contact_form_toggle.js

@@ -1,5 +1,7 @@
 /* Unhide contact form if JS is enabled */
 window.addEventListener('DOMContentLoaded', (event) => {
     const contact_form_wrapper = document.getElementsByClassName('content__contact_form_wrapper')[0];
-    contact_form_wrapper.style.setProperty('display', 'block');
+    if (contact_form_wrapper) {
+        contact_form_wrapper.style.setProperty('display', 'block');
+    }
 });