feat: smptjs for contact-us page

Contact_Us/contact.html

@@ -69,8 +69,9 @@
     <div class="contactDetails">
       <span>
         <h2><i class="fas fa-paper-plane"></i> Contact Us</h2>
-        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius soluta eveniet delectus nemo, reiciendis
-          repellendus.</p>
+        <p>You can open a ticket by clicking the <code>Open Ticket</code>
+          button <br>This creates an email where you can
+          contact the staff team</p>
         <div class="icons">
           <!-- TEMPOLARY ICON can be remove / change any time -->
           <img class="icon" src="../Assets/Images/icons/facebook.png" alt="Facebook">
@@ -82,34 +83,23 @@ <h2><i class="fas fa-paper-plane"></i> Contact Us</h2>
     </div>
     <div class="contactForm">
       <h2>Contact Us</h2>
-      
-      <form>
+
+      <form method="post">
         <span>
           <label><i class="fas fa-user"></i> Name</label>
-          <input type="text" placeholder="Type Name">
+          <input type="text" placeholder="Type Name" id="name">
         </span>
         <span>
           <label><i class="fas fa-envelope"></i> Email</label>
-          <input type="email" placeholder="Type Email">
-        </span>
-        <span>
-          <label><i class="fas fa-pencil-alt"></i> Your Message</label>
-          <textarea placeholder="Type Message"></textarea>
+          <input type="email" placeholder="Type Email" id="email">
         </span>
-        <button id="scrollActivate" type="button" class="btn btn-light viewmore"><span>
-          <i class="fas fa-chevron-down"></i>
-            Send Message</span></button>
+        <input id="send" type="button" value="Send Message" onclick="sendEmail();" /><span>
       </form>
     </div>
   </section>
 
-<!-- WORK-IN-PROGRESS smptjs email sending extension for contact-us
-**this will move to new branch to prevent confusion when editing styling of this page, will merge after page is more stable.
-
   <script src="https://smtpjs.com/v3/smtp.js"></script>
   <script src="./contact.js"></script>
--->
-
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
     </script>

Contact_Us/contact.js

@@ -0,0 +1,20 @@
+function sendEmail() {
+  var EmailInput = document.getElementById("email").value;
+  var NameInput = document.getElementById("name").value;
+  var button = document.getElementById("send"),
+    count = 1;
+  button.onclick = function () {
+    count += 1;
+  };
+  Email.send({
+    SecureToken: "",
+    To: EmailInput,
+    From: "",
+    Subject: "Support Ticket" + "#" + count,
+    Body: "Thank you for reaching out to ASEAN BTE. This is an automated message to notify you that we have received your ticket and one of our team members will get back to you to assist with this matter. \n Please send you queries by replying to this email",
+  }).then(function (message) {
+    alert(
+      "A ticket has been created, please check your inbox, if you didn't find it check the spam folder"
+    );
+  });
+}