begin working on form, added custom js

index.html

@@ -42,8 +42,6 @@
                 </li>
                 <li class="nav-item"><a class="nav-link" href="#portfolio" title="Portfolio"><span class="menu-title">Portfolio</span></a>
                 </li>
-                <li class="nav-item"><a class="nav-link" href="#references" title="References"><span class="menu-title">References</span></a>
-                </li>
                 <li class="nav-item"><a class="nav-link" href="#contact" title="Contact"><span class="menu-title">Contact</span></a>
                 </li>
               </ul>
@@ -286,22 +284,22 @@
             <div class="h6"><i class="fa fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i> +1-469-892-8730</div>
             <div class="h6"><i class="fa fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i> daniel@danieltam.net</div>
           </div>
-          <div class="mt-5 d-print-none"><form action="https://formspree.io/your@email.com"
+          <div class="mt-5 d-print-none">
-    method="POST">
+            <form onsubmit='sendMessage();'>
-  <div class="form-outline mb-4">
+              <div class="form-outline mb-4">
-    <input type="text" id="name" class="form-control" required/>
+                <input type="text" id="name" class="form-control" required/>
-    <label class="form-label" for="name">Name</label>
+                <label class="form-label" for="name">Name</label>
-  </div>
+              </div>
-  <div class="form-outline mb-4">
+              <div class="form-outline mb-4">
-    <input type="email" id="email" class="form-control" required/>
+                <input type="email" id="email" class="form-control" required/>
-    <label class="form-label" for="email">Email address</label>
+                <label class="form-label" for="email">Email address</label>
-  </div>
+              </div>
-  <div class="form-outline mb-4">
+              <div class="form-outline mb-4">
-    <textarea class="form-control" style="resize: none;" id="message" rows="4" required></textarea>
+                <textarea class="form-control" style="resize: none;" id="message" rows="4" required></textarea>
-    <label class="form-label" for="message">Message</label>
+                <label class="form-label" for="message">Message</label>
-  </div>
+              </div>
-  <button class="btn btn-info btn-block mb-4" type="submit">Send</button>
+              <button class="btn btn-info btn-block mb-4">Send</button>
-</form>
+            </form>
           </div>
         </div>
         <div class="col-md-7 d-print-none" data-aos="zoom-in" data-aos-delay="100"><img class="img-fluid" src="images/contact.jpg" width="800" height="500"/></div>
@@ -341,5 +339,40 @@
     <script src="scripts/mdb.min.js?ver=1.2.1"></script>
     <script src="scripts/aos.js?ver=1.2.1"></script>
     <script src="scripts/main.js?ver=1.2.1"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
+    <script language="javascript">
+      // 
+      
+
+      function sendMessage() {
+        // get form data
+        let formData = {
+          name: $('#name').val(),
+          email: $('#email').val(),
+          message: $('#message').val(),
+        };
+
+        // send data from the form
+        $.ajax({
+          type: 'POST',
+          url : '/message',
+          data: formData,
+          dataType: "json",
+          encode: true,
+          success: sendSuccess(),
+          error: swal("Error", "There has been an error submitting your form. Please try again.", "error"),
+        });
+
+      }
+
+      function sendSuccess() {
+        $('#name').val('');
+        $('#email').val('');
+        $('#message').val('');
+        swal("Thank you!", "Your message has been sent.", "success");
+      }
+      
+    </script>
   </body>
 </html>