set up emailjs connection

iam-weijie · Aug 24, 2024 · 5b9af8b · 5b9af8b
1 parent 20ce799
commit 5b9af8b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/email.js b/email.js
@@ -0,0 +1,23 @@
+function sendEmail(e) {
+  e.preventDefault();
+
+  const serviceID = "service_u48x7o7";
+  const templateID = "template_zci1a7u";
+
+  var params = {
+    name: document.getElementById("name").value,
+    email: document.getElementById("email").value,
+    message: document.getElementById("message").value,
+  };
+
+  emailjs
+    .send(serviceID, templateID, params)
+    .then((res) => {
+      document.getElementById("name").value = "";
+      document.getElementById("email").value = "";
+      document.getElementById("message").value = "";
+      console.log(res);
+      alert("Email sent successfully!");
+    })
+    .catch((err) => console.log(err));
+}
diff --git a/index.html b/index.html
@@ -14,10 +14,21 @@
     />
     <link rel="stylesheet" href="assets/css/main.css" />
     <link rel="icon" href="images/logo.png" type="image/x-icon" />
-
     <noscript
       ><link rel="stylesheet" href="assets/css/noscript.css"
     /></noscript>
+    <script src="email.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"
+    ></script>
+    <script type="text/javascript">
+      (function () {
+        emailjs.init({
+          publicKey: "OcY4_jUcIu4KDpLEI",
+        });
+      })();
+    </script>
   </head>
   <body class="is-preload">
     <!-- Page Wrapper -->
@@ -100,30 +111,27 @@ <h2 class="major">Contact</h2>
           </div>
           <div class="inner columns divided">
             <div class="span-3-25">
-              <form method="post" action="#">
+              <form onSubmit="sendEmail(event)">
                 <div class="fields">
                   <div class="field half">
                     <label for="name">Name</label>
-                    <input type="text" name="name" id="name" />
+                    <input type="text" name="name" id="name" required />
                   </div>
                   <div class="field half">
                     <label for="email">Email</label>
-                    <input type="email" name="email" id="email" />
+                    <input type="email" name="email" id="email" required />
                   </div>
                   <div class="field">
                     <label for="message">Message</label>
-                    <textarea name="message" id="message" rows="4"></textarea>
+                    <textarea
+                      name="message"
+                      id="message"
+                      rows="4"
+                      required
+                    ></textarea>
                   </div>
                 </div>
-                <ul class="actions">
-                  <li>
-                    <input
-                      type="submit"
-                      value="Send Message"
-                      class="button primary"
-                    />
-                  </li>
-                </ul>
+                <button class="button primary">Send</button>
               </form>
             </div>
             <div class="span-1-5">