Added Javacript code to subscribe form

contact.html

@@ -406,45 +406,45 @@ <h3><span class="bold">CALL US</span></h3>
             <div class="relative">
               <div id="mc_embed_signup" class="nl-form-container clearfix">
                 <form
-                  action="http://abcgomel.us9.list-manage.com/subscribe/post-json?u=ba37086d08bdc9f56f3592af0&amp;id=e38247f7cc&amp;c=?"
-                  method="post"
-                  id="mc-embedded-subscribe-form"
-                  name="mc-embedded-subscribe-form"
-                  class="newsletterform validate"
-                  target="_blank"
-                  novalidate
-                >
-                  <input
-                    type="email"
-                    value=""
-                    name="EMAIL"
-                    class="email nl-email-input"
-                    id="mce-EMAIL"
-                    placeholder="Enter your email"
-                    required
-                  />
-                  <div style="position: absolute; left: -5000px">
-                    <input
-                      type="text"
-                      name="b_ba37086d08bdc9f56f3592af0_e38247f7cc"
-                      tabindex="-1"
-                      value=""
-                    />
-                  </div>
-
-                  <input
-                    type="submit"
-                    value="SUBSCRIBE"
-                    name="subscribe"
-                    id="mc-embedded-subscribe"
-                    class="button medium gray"
-                  />
-                </form>
-                <div id="notification_container"></div>
+              id="subscribe-form"
+              action="http://abcgomel.us9.list-manage.com/subscribe/post-json?u=ba37086d08bdc9f56f3592af0&amp;id=e38247f7cc&amp;c=?"
+              method="post"
+              name="mc-embedded-subscribe-form"
+              class="newsletterform validate"
+              target="_blank"
+              novalidate>
+              <input
+                type="email"
+                value=""
+                name="EMAIL"
+                class="email nl-email-input"
+                id="mce-EMAIL"
+                placeholder="Enter your email"
+                required
+              />
+              <div style="position: absolute; left: -5000px">
+                <input
+                  type="text"
+                  name="b_ba37086d08bdc9f56f3592af0_e38247f7cc"
+                  tabindex="-1"
+                  value=""
+                />
               </div>
-            </div>
-          </div>
-        </div>
+
+              <input
+                type="submit"
+                value="SUBSCRIBE"
+                name="subscribe"
+                id="mc-embedded-subscribe"
+                class="button medium gray"
+              />
+            </form>
+            <div id="notification_container"></div>
+
+                          </div>
+                        </div>
+                      </div>
+                    </div>
 
         <footer class="page-section pt-80 pb-50">
           <div class="container">
@@ -595,5 +595,44 @@ <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
     <script src="js/owl.carousel.min.js"></script>
 
     <script src="js/main.js"></script>
+
+    <script>
+      document.getElementById("subscribe-form").addEventListener("submit", function(event) {
+        event.preventDefault();
+
+        const form = event.target;
+        const email = document.getElementById("mce-EMAIL").value;
+        const url = new URL(form.action);
+
+        if (email) {
+          const params = new URLSearchParams(new FormData(form)).toString();
+          const script = document.createElement('script');
+          script.src = `${url}&${params}`;
+
+          script.onload = function() {
+            document.head.removeChild(script);
+          };
+
+          script.onerror = function() {
+            document.getElementById("notification_container").innerHTML = '<div class="alert alert-danger">Could not connect to the server. Please try later.</div>';
+            document.head.removeChild(script);
+          };
+
+          document.head.appendChild(script);
+
+          window['mcCallback'] = function(response) {
+            const notificationContainer = document.getElementById("notification_container");
+            if (response.result === "success") {
+              notificationContainer.innerHTML = '<div class="alert alert-success">Thank you for subscribing!</div>';
+            } else {
+              notificationContainer.innerHTML = '<div class="alert alert-danger">Subscription failed. Please try again later.</div>';
+            }
+            form.reset();
+          };
+        }
+      });
+    </script>
+
+
   </body>
 </html>

contact.js

@@ -1,37 +1,59 @@
-    // for handling form submission
-    document.addEventListener('DOMContentLoaded', function () {
-      
-      const contactForm = document.getElementById('contact-form');
-      const contactSubmit = document.getElementById('contact-submit');
-      contactForm.addEventListener('submit', async function (event) {
-        event.preventDefault();
-          // sending data back to API
-        const response = await fetch('https://xceedesigns-backend.vercel.app/contact', {
-          method: 'POST',
-          body: JSON.stringify({
-            name: document.getElementById('name').value,
-            email: document.getElementById('email').value,
-            message: document.getElementById('message').value
-          }),
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        });
-
-        const parsedResponse = await response.text();
-
-        // modal info
+document.addEventListener('DOMContentLoaded', function () {
+  const contactForm = document.getElementById('contact-form');
+  contactForm.addEventListener('submit', async function (event) {
+    event.preventDefault();
+
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const message = document.getElementById('message').value;
+
+    try {
+      const response = await fetch('https://xceedesigns-backend.vercel.app/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ name, email, message })
+      });
+
+      const parsedResponse = await response.json(); // If the server returns JSON
+
+      // Check if the response is ok (status in the range 200-299)
+      if (response.ok) {
+        // Show success modal
         const modalBody = document.querySelector('.modal-body');
         const modalTitle = document.querySelector('.modal-title');
         modalTitle.textContent = 'XceeDesigns LLC.';
         modalTitle.style.fontWeight = 'bold';
         modalBody.textContent = "Thank you for contacting us. We'll get back to you soon!";
-        // modalBody.style.color = '#04aa6d';
         $('#myModal').modal('show');
 
-        //reset form
-        document.getElementById('contact-form').reset();
-        //log status
-        console.log(response.status);
-      });
-    });
+        // Reset form
+        contactForm.reset();
+      } else {
+        // Show error modal
+        const modalBody = document.querySelector('.modal-body');
+        const modalTitle = document.querySelector('.modal-title');
+        modalTitle.textContent = 'Error';
+        modalTitle.style.fontWeight = 'bold';
+        modalBody.textContent = "There was a problem with your submission. Please try again later.";
+        $('#myModal').modal('show');
+      }
+
+      // Log response details for debugging
+      console.log('Response status:', response.status);
+      console.log('Response body:', parsedResponse);
+
+    } catch (error) {
+      // Log the error and show a general error message
+      console.error('Fetch error:', error);
+
+      const modalBody = document.querySelector('.modal-body');
+      const modalTitle = document.querySelector('.modal-title');
+      modalTitle.textContent = 'Error';
+      modalTitle.style.fontWeight = 'bold';
+      modalBody.textContent = "Could not connect to the server. Please try again later";
+      $('#myModal').modal('show');
+    }
+  });
+});