fix: add email submission api

src/assets/js/app.js

@@ -1,22 +1,10 @@
-import $ from "jquery";
+import $ from 'jquery';
 
 $(document).ready(function () {
   // Active Class Changing for Menu
-  $(".menu__link").on("click", function () {
-    $(".menu__link.active").removeClass("active");
-    $(this).addClass("active");
-  });
-
-
-  // scroll_to_top button event
-  $(".scroll__top").on("click", (e) => {
-    e.preventDefault();
-    $("html").animate(
-      {
-        scrollTop: 0,
-      },
-      1000
-    );
+  $('.menu__link').on('click', function () {
+    $('.menu__link.active').removeClass('active');
+    $(this).addClass('active');
   });
 
   // FUNNY:- Message for Developers who open Dev-Tools on out site :)
@@ -29,21 +17,7 @@ $(document).ready(function () {
     font-size: 20px;
 `;
   console.log(
-    "%c 🔥 Welcome Developers, If you find any bugs, feel free to knock us anytime.🔥",
+    '%c 🔥 Welcome Developers, If you find any bugs, feel free to knock us anytime.🔥',
     styles
   );
 });
-
-// window_scroll_function
-$(window).scroll(function () {
-  // [Sticky Header]
-  let scroll = $(window).scrollTop();
-  const header = document.querySelector(".header");
-  if (scroll > 500) {
-    // Custom CSS written and that's will trigger while hovering after scroll
-    header.classList.add("fixed");
-    header.setAttribute("id", "header__sticky");
-  } else {
-    header.removeAttribute("id");
-  }
-});

src/assets/js/form.js

@@ -0,0 +1,27 @@
+import $ from 'jquery';
+
+/**
+ * Form submission
+ */
+
+const formElm = document.querySelector('form');
+formElm.onsubmit = (e) => {
+  e.preventDefault();
+  const data = Object.fromEntries(Array.from(new FormData(formElm)));
+
+  $.post('https://nnxirtzjgqauhzo.form.io/contactus/submission', {
+    data: {
+      yourName: data.name,
+      email1: data.email,
+      subject: data.subject,
+      message1: data.message,
+    },
+  })
+    .done(function () {
+      alert('Your message have been submitted');
+      formElm.reset();
+    })
+    .fail(function () {
+      alert('There was an error with your submission');
+    });
+};

src/assets/js/scroll.js

@@ -0,0 +1,27 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+  // scroll_to_top button event
+  $('.scroll__top').on('click', (e) => {
+    e.preventDefault();
+    $('html').animate(
+      {
+        scrollTop: 0,
+      },
+      1000
+    );
+  });
+  // window_scroll_function
+  $(window).scroll(function () {
+    // [Sticky Header]
+    let scroll = $(window).scrollTop();
+    const header = document.querySelector('.header');
+    if (scroll > 500) {
+      // Custom CSS written and that's will trigger while hovering after scroll
+      header.classList.add('fixed');
+      header.setAttribute('id', 'header__sticky');
+    } else {
+      header.removeAttribute('id');
+    }
+  });
+});

src/index.html

@@ -324,21 +324,24 @@ <h3 class="section__title">আমাদের সাথে যোগাযোগ
               <form action="#" class="contact__form form">
                 <input
                   type="text"
+                  name="name"
                   class="contact__name form-control"
                   placeholder="আপনার নাম "
                 />
                 <input
                   type="email"
+                  name="email"
                   class="contact__email form-control"
                   placeholder="আপনার ইমেইল"
                 />
                 <input
                   type="text"
+                  name="subject"
                   class="contact__sub form-control"
                   placeholder="বিষয়"
                 />
                 <textarea
-                  name="text"
+                  name="message"
                   id="contact__text"
                   cols="30"
                   rows="10"

src/script.js

@@ -1,7 +1,9 @@
-import "jquery/dist/jquery.slim";
-import "popper.js/dist/popper";
-import "bootstrap/dist/js/bootstrap.bundle";
-import "bootstrap/dist/css/bootstrap.css";
-import "./assets/js/app";
+import 'jquery/dist/jquery.slim';
+import 'popper.js/dist/popper';
+import 'bootstrap/dist/js/bootstrap.bundle';
+import 'bootstrap/dist/css/bootstrap.css';
 
-import "./assets/sass/main.scss";
+import './assets/sass/main.scss';
+import './assets/js/app';
+import './assets/js/scroll';
+import './assets/js/form';