Added excel sheet for response

css/style.css

@@ -31,7 +31,7 @@ html {
     justify-content: center;
     align-items: center;
     z-index: 9999;
-    background-color: var(--orange)
+    background-color: var(--orange);
 }
 
 @-webkit-keyframes honeycomb {

index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/style.css">
     <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <link rel="shortcut icon" href="img/logo.webp" type="image/x-icon">
     <title>Skyjumper Trampoline Park Booking</title>
 </head>
@@ -449,12 +450,14 @@ <h2>FOR BIRTHDAY &
                     <div class="form-img-holder">
                         <div class="form">
                             <h2><a href="tel:8882288001">+91-888 2288 001</a></h2>
-                            <form>
-                                <input type="text" name="name" id="name" placeholder="NAME">
-                                <input type="tel" name="phone" id="phone" placeholder="PHONE">
-                                <input type="email" name="email" id="email" placeholder="EMAIL">
-                                <textarea name="message" id="message" placeholder="ADD MESSAGE HERE"></textarea>
-                                <button type="submit">Submit</button>
+                            <form action="" method="post" name="enq-form" id="enq-form">
+                                <input type="text" name="Full Name" id="name" placeholder="NAME" required pattern="[A-Za-z ]+"
+                                title="Only letters and spaces are allowed">
+                                <input type="tel" name="Phone No" id="phone" placeholder="+91 XXXXXXXXXXX"
+                                required pattern="\+[0-9]+">
+                                <input type="email" name="Email" id="email" placeholder="EMAIL" required>
+                                <textarea name="Message" id="message" placeholder="ADD MESSAGE HERE" required></textarea>
+                                <button type="submit" id="submitBtn">Submit</button>
                             </form>
                         </div>
                         <div class="img-holder">

js/script.js

@@ -193,4 +193,121 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         }
     }).mount();
-});
+});
+
+
+
+// start map function
+var enquiryScriptURL = 'https://script.google.com/macros/s/AKfycbwk3w77lzqvXf-DJHAzIr7ff7eHLw6R0WubhqETxLAX0-CbBbvQGd3FtOjdnR0pgNyGKg/exec';
+
+
+function submitForm(form, successMessage, googeScriptURL) {
+    // Add current date and time to the form data
+    var formData = new FormData(form);
+    var currentDate = new Date();
+    formData.append('TimeStamp', currentDate.toLocaleString());
+
+    showLoader();
+
+    fetch(googeScriptURL, { method: 'POST', body: formData })
+        .then(response => response.json())
+        .then(data => {
+            hideLoader();
+            if (data.result == 'success') {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success!',
+                    text: successMessage,
+                });
+                form.reset();
+                resetBorderColors(form);
+            } else {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error!',
+                    text: 'Oops, something went wrong. Please try again later.',
+                });
+            }
+        })
+        .catch(error => {
+            hideLoader();
+
+            Swal.fire({
+                icon: 'error',
+                title: 'Error!',
+                text: 'Oops, something went wrong. Please try again later.',
+            });
+
+            console.error('Error!', error.message);
+        });
+}
+
+function resetBorderColors(form) {
+    const inputs = form.querySelectorAll('input');
+    inputs.forEach(input => {
+        input.style.borderColor = '#ccc';
+        input.style.outlineColor = '#ccc';
+    });
+}
+
+function setupFormValidation(form, scriptURL, successMessage) {
+    // Function to check if an input is valid
+    function isValidInput(input) {
+        return input.checkValidity();
+    }
+    var inputs = form.querySelectorAll('input[required]');
+    // Function to check all inputs and enable/disable submit button
+    function validateForm() {
+        let isValidForm = true;
+
+        inputs.forEach(input => {
+            if (!isValidInput(input)) {
+                isValidForm = false;
+                input.style.borderColor = '#bd3135';
+                input.style.outlineColor = '#bd3135';
+            } else {
+                input.style.borderColor = '#2ec97e';
+                input.style.outlineColor = '#2ec97e';
+            }
+        });
+
+    }
+
+
+    inputs.forEach(input => {
+        input.addEventListener('input', () => {
+            validateForm();
+        });
+    });
+
+    // Submit form function
+    form.addEventListener('submit', e => {
+        e.preventDefault();
+
+        const isValid = Array.from(inputs).every(isValidInput);
+        if (isValid) {
+            submitForm(form, successMessage, scriptURL);
+        } else {
+            Swal.fire({
+                icon: 'error',
+                title: 'Error!',
+                text: 'Please fill the form correctly in the highlighted sections.',
+            });
+        }
+    });
+}
+
+// Example usage for form1
+var form1 = document.getElementById('enq-form');
+if (form1) {
+    setupFormValidation(form1, enquiryScriptURL, 'Thank you! Your enquiry request has been sent successfully.');
+}
+
+function showLoader(){
+    var overlay = document.getElementById('overlay');
+    overlay.style.backgroundColor = 'rgba(236, 98, 60, 0.95)';
+    overlay.style.display = 'flex';
+}
+function hideLoader(){
+    document.getElementById('overlay').style.display = 'none';
+}