Final touches

src/Components/Pages/Contact/ContactForm.tsx

@@ -1,18 +1,67 @@
+import React from "react";
+import emailjs from "@emailjs/browser";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
 const ContactForm = () => {
+  const notify = () => {
+    toast.success("Message Sent Successfully!");
+  };
+
+  const errorToast = () => {
+    toast.error("Error Sending Message!");
+  };
+
+  const emptyForm = () => {
+    toast.warning("Please fill all the fields!");
+  };
+
+  const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    let isEmpty = Array.from(e.currentTarget.elements).some(
+      (input) =>
+        (input as HTMLInputElement).type !== "submit" &&
+        (input as HTMLInputElement).value.trim() === ""
+    );
+
+    if (isEmpty) {
+      emptyForm();
+      return;
+    }
+
+    emailjs
+      .sendForm("service_42i3ig6", "template_f30zlog", e.currentTarget, {
+        publicKey: "vcSOwPedqkRH3nmr9",
+      })
+      .then(
+        (result) => {
+          console.log(result.text);
+          notify();
+        },
+        (error) => {
+          console.log(error.text);
+          errorToast();
+        }
+      );
+
+    e.currentTarget.reset();
+  };
+
   return (
     <div className="mt-10 mx-5  lg:mx-0 flex justify-center items-center">
-      <form className="w-full md:w-auto">
+      <form onSubmit={sendEmail} className="w-full md:w-auto">
         <div className="flex flex-col md:flex-row md:gap-3">
           <input
             className="form-input"
             type="text"
-            id="name"
+            name="user_name"
             placeholder="Name"
           />
           <input
             className="form-input"
             type="email"
-            id="email"
+            name="user_email"
             placeholder="Email"
           />
         </div>
@@ -20,13 +69,13 @@ const ContactForm = () => {
           <input
             className="form-input"
             type="text"
-            id="company"
+            name="user_company"
             placeholder="Company"
           />
           <input
             className="form-input"
             type="number"
-            id="phone"
+            name="user_phone"
             placeholder="Phone"
           />
         </div>
@@ -34,26 +83,39 @@ const ContactForm = () => {
           <input
             className="form-input"
             type="text"
-            id="question"
+            name="user_question"
             placeholder="What is your most important question?"
           ></input>
 
           <textarea
             className="form-input"
             name="message"
-            id="message"
             placeholder="Message"
             rows={6}
           ></textarea>
         </div>
 
         <div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
-          <a className="flex w-full" href="#Contact">
-            <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
-              Send!
-            </button>
-          </a>
+          <button
+            type="submit"
+            className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
+          >
+            Send
+          </button>
         </div>
+
+        <ToastContainer
+          position="top-center"
+          autoClose={5000}
+          hideProgressBar
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="dark"
+        />
       </form>
     </div>
   );