Add functionality to 'contact' form

css/custom.css

@@ -324,3 +324,21 @@ article.cardProject {
         transform: scale(0.95);
     }
 }
+
+
+/* CONTACT FORM */
+.hidden {
+            display: none;
+        }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }

index.html

@@ -1054,7 +1054,7 @@ <h2 class="colorlib-heading">Contact</h2>
 								<div class="row">
 									<div class="col-md-10 col-md-offset-1 col-md-pull-1 animate-box"
 										data-animate-effect="fadeInRight">
-										<form action="https://formspree.io/f/mvgpooel" method="POST">
+										<form if="ntactForm">
             <div class="form-group mb-4">
                 <input type="text" name="name" class="form-control border rounded w-full py-2 px-3" placeholder="Name" required>
             </div>
@@ -1068,8 +1068,12 @@ <h2 class="colorlib-heading">Contact</h2>
                 <textarea name="message" id="message" cols="30" rows="7" class="form-control border rounded w-full py-2 px-3" placeholder="Have a great idea or do you need help overcoming challenges in your business? Send me a message and let's chat!" required></textarea>
             </div>
             <div class="form-group flex justify-end">
-                <input type="submit" class="btn btn-primary bg-blue-500 text-white py-2 px-4 rounded" value="Send Message">
+				<button type="submit" id="submitButton" class="btn btn-primary bg-blue-500 text-white py-2 px-4 rounded flex items-center justify-center">
+					<span id="buttonText">Send Message</span>
+					<div id="buttonSpinner" class="spinner hidden ml-2"></div>
+				</button>
             </div>
+											<div id="form-messages" class="hidden mb-4 p-2 rounded"></div>
         </form>
 									</div>
 

js/custom.js

@@ -37,3 +37,90 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 });
+
+// Contact Form
+
+document.getElementById('contactForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    // Show loading spinner and disable the button
+    document.getElementById('buttonSpinner').classList.remove('hidden');
+    document.getElementById('buttonText').classList.add('hidden');
+    document.getElementById('submitButton').disabled = true;
+
+    // Form data
+    const formData = new FormData(this);
+
+    // AJAX request
+    fetch('https://formspree.io/f/mvgpooel', {
+        method: 'POST',
+        body: formData,
+        headers: {
+            'Accept': 'application/json'
+        }
+    })
+    .then(response => {
+        // Handle response
+        document.getElementById('buttonSpinner').classList.add('hidden');
+        document.getElementById('buttonText').classList.remove('hidden');
+        document.getElementById('submitButton').disabled = false;
+
+        let messageBox = document.getElementById('form-messages');
+        messageBox.classList.remove('hidden');
+        if (response.ok) {
+            messageBox.classList.add('bg-green-100', 'text-green-700');
+            messageBox.innerHTML = 'Your message has been sent successfully!';
+            document.getElementById('contactForm').reset();
+        } else {
+            response.json().then(data => {
+                messageBox.classList.add('bg-red-100', 'text-red-700');
+                if (data.errors) {
+                    messageBox.innerHTML = data.errors.map(error => error.message).join('<br>');
+                } else {
+                    messageBox.innerHTML = 'Oops! Something went wrong. Please try again later.';
+                }
+            });
+        }
+    })
+    .catch(error => {
+        // Handle error
+        document.getElementById('buttonSpinner').classList.add('hidden');
+        document.getElementById('buttonText').classList.remove('hidden');
+        document.getElementById('submitButton').disabled = false;
+
+        let messageBox = document.getElementById('form-messages');
+        messageBox.classList.remove('hidden');
+        messageBox.classList.add('bg-red-100', 'text-red-700');
+        messageBox.innerHTML = 'Oops! There was a problem submitting your form. Please try again.';
+    });
+});
+
+// Typewriter effect
+function typeWriter(text, element) {
+    let index = 0;
+    function type() {
+        if (index < text.length) {
+            element.value += text.charAt(index);
+            index++;
+            setTimeout(type, 50);
+        }
+    }
+    setTimeout(type, 1000); // 1 second delay before starting
+}
+
+// Intersection Observer to trigger typewriter effect when textarea is visible
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            const textarea = entry.target;
+            const text = textarea.placeholder;
+            textarea.placeholder = ''; // Clear the placeholder
+            typeWriter(text, textarea); // Start typing animation
+            observer.unobserve(textarea); // Stop observing once the animation starts
+        }
+    });
+}, { threshold: 0.5 }); // Trigger when at least 50% is visible
+
+// Start observing the textarea
+const textarea = document.getElementById('message');
+observer.observe(textarea);