emailjs for contact section

shahidmonowarr · Jan 23, 2023 · 402a233 · 402a233
1 parent e575866
commit 402a233
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -1,15 +1,15 @@
+fakeDB.JSON,1674368028478,8f0974d8ed36739fe0ae4c676b14cc059bc80e83621b9f29c76bdb141b8740e8
 favicon.ico,1655560771700,5e12c71418e52a573911a3e5128e1b55e316b5912f8e749f649084d26d4f483b
 manifest.json,1655353656276,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 robots.txt,1655353657779,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-asset-manifest.json,1674373009628,5a61473ea9226122df124182793fb7621f4be19aeccbf0ea81fee59dd93429c0
-index.html,1674373009628,68446fdfa55bc5547dc3f8c4b19d21949ba8e7b5ffb5fe66510512930739b076
-fakeDB.JSON,1674368028478,8f0974d8ed36739fe0ae4c676b14cc059bc80e83621b9f29c76bdb141b8740e8
-static/js/787.beb77ff5.chunk.js,1674373009706,864efbac16a80e6f42adeaa335e089695d7873578a88cd006045ebb9cfa16cbe
-static/js/787.beb77ff5.chunk.js.map,1674373009706,a49faf1fb700667092e4f4cad92519fb3364e7fccfe2c911b0346534a2a9dcbd
-static/js/main.d3f0924c.js.LICENSE.txt,1674373009659,a4bf333c58f9e94274c19b9aee77a652337affee13e747a3e15415ca14c01597
-static/media/review.8693276546367883219d.jpg,1674373009659,6e79fc230beb384db59ceec9ebcdf2eb74b2270d4c032860146711b7f4e501bb
-static/media/logo.e89c1383872aa95a5c3c.png,1674373009659,0562a877f82e12c660fc14436a6da61e9a7033cda1b7e95fd9d4e0d9e0a06d57
-static/css/main.1b79b855.css,1674373009659,84a0931ca3bbd63689f2816ad4b169c4875261b0e9bb961845281eed56985f95
-static/css/main.1b79b855.css.map,1674373009706,70d5640db8e98f7e32e4908e761fd3e68797e658c6b7f6bb548d9a853ff89822
-static/js/main.d3f0924c.js,1674373009706,3e4010fecd8884f2cfc66f0f5208d6c6575c57adf25e90edadc627fc37ba8c55
-static/js/main.d3f0924c.js.map,1674373009706,f852dd25114061e9cb584475b0a53ed5d6c40730666a35bda7226faacfbe0dd0
+asset-manifest.json,1674374380691,733eb5d0bee8a894b1c2ab4e3cb612fd0dc475fc45b97255adb3ca42e502d766
+index.html,1674374380691,a73fde9e572d66bfc761cfa1077b23f170b49b38a21626f522a747801bf63f97
+static/js/787.beb77ff5.chunk.js,1674374380742,864efbac16a80e6f42adeaa335e089695d7873578a88cd006045ebb9cfa16cbe
+static/js/787.beb77ff5.chunk.js.map,1674374380742,a49faf1fb700667092e4f4cad92519fb3364e7fccfe2c911b0346534a2a9dcbd
+static/js/main.8565a15f.js.LICENSE.txt,1674374380741,a4bf333c58f9e94274c19b9aee77a652337affee13e747a3e15415ca14c01597
+static/media/logo.e89c1383872aa95a5c3c.png,1674374380742,0562a877f82e12c660fc14436a6da61e9a7033cda1b7e95fd9d4e0d9e0a06d57
+static/media/review.8693276546367883219d.jpg,1674374380743,6e79fc230beb384db59ceec9ebcdf2eb74b2270d4c032860146711b7f4e501bb
+static/css/main.1b79b855.css,1674374380745,84a0931ca3bbd63689f2816ad4b169c4875261b0e9bb961845281eed56985f95
+static/css/main.1b79b855.css.map,1674374380744,70d5640db8e98f7e32e4908e761fd3e68797e658c6b7f6bb548d9a853ff89822
+static/js/main.8565a15f.js,1674374380743,a077a0412f3c417f3e92d98c780df82652b41bac5ca41f8f2c02c7970cd58ce7
+static/js/main.8565a15f.js.map,1674374380744,081f6cfa6db9df4bb4aaa03b7497dd35c7b658a7250794e6d0404bcf3805f1d0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "aos": "^3.0.0-beta.6",
     "axios": "^0.27.2",
     "bootstrap": "^5.1.3",
+    "emailjs-com": "^3.2.0",
     "firebase": "^9.9.3",
     "mdb-react-ui-kit": "^4.1.0",
     "react": "^18.2.0",

diff --git a/src/Components/Contact/Contact.js b/src/Components/Contact/Contact.js
@@ -1,8 +1,20 @@
+import emailjs from 'emailjs-com';
 import React from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
 import "./Contact.css";
 
 const Contact = () => {
+  const sendEmail = (e) => {
+    e.preventDefault();
+
+    emailjs.sendForm('service_j5ax74i', 'template_r30vlp2', e.target, 'user_D6NRRRQqBmKlFFSRdDwrA')
+        .then((result) => {
+            console.log(result.text);
+        }, (error) => {
+            console.log(error.text);
+        });
+    e.target.reset();
+};
   return (
     <div id="contact">
       <div className="container overflow-hidden">
@@ -37,18 +49,15 @@ const Contact = () => {
               <h4 className="text-primary">We'd Love To Hear From You</h4>
 
               <div className=" text-start p-2 mt-2">
-                <Form className="mt-2">
+                <Form onSubmit={sendEmail} className="mt-2">
                   <Row className="pb-3">
                     <Col>
-                      <Form.Control placeholder="First name" />
-                    </Col>
-                    <Col>
-                      <Form.Control placeholder="Last name" />
+                      <Form.Control type="text" name="name" placeholder="Your Name" />
                     </Col>
                   </Row>
                   <Form.Group className="pb-3" controlId="formBasicEmail">
 
-                    <Form.Control type="email" placeholder="Enter email" />
+                    <Form.Control type="email" name="email" placeholder="Enter Email" />
                     <Form.Text className="text-muted">
                       We'll never share your email with anyone else.
                     </Form.Text>
@@ -60,6 +69,7 @@ const Contact = () => {
                   >
                     <Form.Control
                       as="textarea"
+                      name="message"
                       rows={3}
                       placeholder="Message..."
                     />