Contact form is working

Shreyans2004 · Oct 11, 2022 · ffc6345 · ffc6345
1 parent 482ab1e
commit ffc6345
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 36 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -82,14 +82,15 @@ h6 {
   right: 15px;
   bottom: 15px;
   z-index: 996;
-  background: #3b4ef8;
+  background: #b1b8f0;
   width: 40px;
   height: 40px;
   border-radius: 4px;
   transition: all 0.4s;
 }
 .back-to-top i {
   font-size: 28px;
+  color:#111;
   /* color: #fff;*/
   line-height: 0;
 }
@@ -307,9 +308,9 @@ h6 {
   line-height: 0;
   transition: 0.5s;
 }
-.mobile-nav-toggle.bi-x {
-  /* color: #fff;*/
-}
+/* .mobile-nav-toggle.bi-x { */
+  /* color: #fff; */
+/* } */
 
 @media (max-width: 991px) {
   .mobile-nav-toggle {
@@ -429,6 +430,7 @@ h6 {
   display: block;
   padding: 8px 32px 10px 32px;
   margin-top: 25px;
+  margin-bottom: 25px;
   border-radius: 5px;
   transition: 0.5s;
   color: #fff;
@@ -968,10 +970,10 @@ section {
 /*--------------------------------------------------------------
 # Team
 --------------------------------------------------------------*/
-.team {
+/* .team { */
   /* background: #fff; */
   /* padding: 35px 7rem; */
-}
+/* } */
 
 .founder-img {
   width: 13rem;
@@ -1042,9 +1044,10 @@ section {
   margin: 0 10px;
   display: inline-block;
 }
-.team .member .social a:hover {
+/* .team .member .social a:hover { */
   /* color: #fff;*/
-}
+/* } */
+
 .team .member .social i {
   font-size: 18px;
   margin: 0 2px;
@@ -1201,9 +1204,9 @@ section {
 .faq .faq-list .icon-show {
   display: none;
 }
-.faq .faq-list .collapsed {
+/* .faq .faq-list .collapsed { */
   /* color: black; */
-}
+/* } */
 .faq .faq-list .collapsed:hover {
   color: #3b4ef8;
 }
@@ -1243,37 +1246,37 @@ section {
   font-size: 14px;
   margin-bottom: 0;
 }
-.contact .php-email-form {
+.contact .javascript-email-form {
   box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
   padding: 30px;
   background: #fff;
 }
-.contact .php-email-form .error-message {
+.contact .javascript-email-form .error-message {
   display: none;
   /* color: #fff;*/
   background: #ed3c0d;
   text-align: left;
   padding: 15px;
   font-weight: 600;
 }
-.contact .php-email-form .error-message br + br {
+.contact .javascript-email-form .error-message br + br {
   margin-top: 25px;
 }
-.contact .php-email-form .sent-message {
+.contact .javascript-email-form .sent-message {
   display: none;
   /* color: #fff;*/
   background: #18d26e;
   text-align: center;
   padding: 15px;
   font-weight: 600;
 }
-.contact .php-email-form .loading {
+.contact .javascript-email-form .loading {
   display: none;
   background: #fff;
   text-align: center;
   padding: 15px;
 }
-.contact .php-email-form .loading:before {
+.contact .javascript-email-form .loading:before {
   content: "";
   display: inline-block;
   border-radius: 50%;
@@ -1285,31 +1288,31 @@ section {
   -webkit-animation: animate-loading 1s linear infinite;
   animation: animate-loading 1s linear infinite;
 }
-.contact .php-email-form input,
-.contact .php-email-form textarea {
+.contact .javascript-email-form input,
+.contact .javascript-email-form textarea {
   border-radius: 5px;
   box-shadow: none;
   font-size: 14px;
 }
-.contact .php-email-form input:focus,
-.contact .php-email-form textarea:focus {
+.contact .javascript-email-form input:focus,
+.contact .javascript-email-form textarea:focus {
   border-color: #8ea5ca;
 }
-.contact .php-email-form input {
+.contact .javascript-email-form input {
   padding: 10px 15px;
 }
-.contact .php-email-form textarea {
+.contact .javascript-email-form textarea {
   padding: 12px 15px;
 }
-.contact .php-email-form button[type="submit"] {
+.contact .javascript-email-form button[type="submit"] {
   background: #3b4ef8;
   border: 0;
   padding: 10px 24px;
   /* color: #fff;*/
   transition: 0.4s;
   border-radius: 5px;
 }
-.contact .php-email-form button[type="submit"]:hover {
+.contact .javascript-email-form button[type="submit"]:hover {
   background: #0a22f6;
 }
 @-webkit-keyframes animate-loading {
@@ -1486,7 +1489,8 @@ section {
   transition: 0.3s;
 }
 #footer .social-links a:hover {
-  background: #3b4ef8;
+  background: #a7aeed;
+  /* background: #ebeda7; */
   /* color: #fff;*/
   text-decoration: none;
 }

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -243,4 +243,24 @@
     })
   });
 
-})()
+})()
+
+/*
+Function that sends the email to eduuhub
+*/
+function SendMail() {
+  const Data = '{"service" : "service_t4spjxu", "template" : "template_voik16d"}';
+  const Object = JSON.parse(Data);
+	var params = {
+		from_name: document.forms["contact-form"]["name"].value,
+		from_email: document.forms["contact-form"]["email"].value,
+		subject_tittle: document.forms["contact-form"]["subject"].value,
+		message: document.forms["contact-form"]["message"].value,
+	}
+	 emailjs.send(Object.service, Object.template, params).then(function (res) {
+    var element = document.getElementById('sent_message');
+    element.innerHTML = "Your message has been sent. Thank you!";
+    element.classList.add("alert");
+    element.classList.add("alert-success");
+	})
+}
diff --git a/index.html b/index.html
@@ -28,9 +28,21 @@
   <!-- Template Main CSS File -->
   <link href="assets/css/style.css" rel="stylesheet" />
 
-  <!-- Dask Mode CSS Files -->
+  <!-- Dark Mode CSS Files -->
   <link href="assets/css/dark-mode-style.css" rel="stylesheet"/>
   <link href='https://css.gg/dark-mode.css' rel='stylesheet'>
+
+  <!-- Script that connect to the email Api -->
+  <script type="text/javascript"
+  src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
+</script>
+<script type="text/javascript">
+(function(){
+emailjs.init("D2jKnHPqRwZkN7ri3");
+})();
+</script>
+  <!-- Script that connect to the email Api ends HERE -->
+
 </head>
 
 <body>
@@ -1242,7 +1254,7 @@ <h3>Call Us</h3>
           </div>
 
           <div class="col-lg-6 mt-4 mt-md-0">
-            <form action="forms/contact.php" method="post" role="form" class="php-email-form">
+            <form action="javaScript:SendMail()" role="form" class="javascript-email-form" name="contact-form">
               <div class="row">
                 <div class="col-md-6 form-group">
                   <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required />
@@ -1255,13 +1267,10 @@ <h3>Call Us</h3>
                 <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required />
               </div>
               <div class="form-group mt-3">
-                <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
+                <textarea class="form-control" name="message" id="message" rows="5" placeholder="Message" required></textarea>
               </div>
-              <div class="my-3">
-                <div class="loading">Loading</div>
-                <div class="error-message"></div>
-                <div class="sent-message">
-                  Your message has been sent. Thank you!
+               <div class="my-3">
+                <div name="sent_message" class="" id="sent_message">
                 </div>
               </div>
               <div class="text-center">
@@ -1372,8 +1381,8 @@ <h4>Subscribe</h4>
   <!-- End Footer -->
 
   <div id="preloader"></div>
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
-      class="bi bi-arrow-up-short"></i></a>
+  <a href="#" class="back-to-top d-flex align-items-center justify-content-center">
+    <i class="bi bi-arrow-up-short" ></i></a>
 
   <!-- Vendor JS Files -->
   <script src="assets/vendor/aos/aos.js"></script>
@@ -1383,6 +1392,7 @@ <h4>Subscribe</h4>
   <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
   <script src="assets/vendor/php-email-form/validate.js"></script>
 
+
   <!-- Template Main JS File -->
   <script src="assets/js/main.js"></script>
 </body>