Merge pull request #234 from activebridge/feature/contacts

Feature/contacts

_includes/modal.html

@@ -0,0 +1,6 @@
+<dialog id="modalwindow" class="modal">
+  <div class="modal__dialog">
+    <button type="button" class="modal__close" data-dismiss="modal" onclick="closeModal()">&times;</button>
+    <p class="message inria-bold text-center mt-1"></p>
+  </div>
+</dialog>

_sass/modal.scss

@@ -0,0 +1,7 @@
+.modal {
+  &::backdrop { background-color: rgba(0, 0, 0, 0.5)}
+  border: none;
+  border-radius: 5px;
+  background-color: #dbdfeb;
+  &__close { margin-left: 90%; }
+}

assets/css/main.scss

@@ -7,6 +7,7 @@
 @import "buttons";
 @import "navbar";
 @import "footer";
+@import "modal";
 @import "carousel";
 @import "index";
 @import "about";

assets/js/contacts-form.js

@@ -1,12 +1,26 @@
-window.onload = () => {
-  document.getElementById("contactsForm").addEventListener('submit', e => {
-    e.preventDefault();
-    const formData = new FormData(e.target);
-    const email = formData.get('contactEmail');
-    formData.delete('contactEmail');
+const closeModal = () => { window.modalwindow.close() }
 
-    let queryParams = new URLSearchParams(formData).toString().replace(/\+/g, '%20');
-    window.location.href = `mailto:${email}?${queryParams}`;
-    e.target.reset();
-  });
-};
+window.contactsForm.addEventListener('submit', function(event) {
+  event.preventDefault();
+  let modal = window.modalwindow;
+  const formData = new FormData(this);
+  fetch(this.action, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      name: formData.get('name'),
+      email: formData.get('email'),
+      subject: formData.get('subject'),
+      message: formData.get('body')
+    })
+  })
+  .then(response => response.text())
+  .then(data => {
+    modal.showModal();
+    modal.querySelector('.message').textContent = data;
+    this.reset();
+  })
+  .catch(error => console.error('Error:', error));
+});

contacts.html

@@ -19,7 +19,7 @@ <h1 class="block-inria-title">{{ site.data.contacts.sub_title }}</h1>
       <p class="message inria-regular">{{ site.data.contacts.description }}</p>
     </div>
 
-    <form class="contacts__form" id="contactsForm">
+    <form class="contacts__form" id="contactsForm" action="https://mailer.pwt.workers.dev/" method="post">
       <input type="hidden" id="contact-email" name="contactEmail" value="{{ site.email }}">
       <div class="contacts__form-group contacts__form-select">
         <label class="contacts__form-label" for="subject">Contact Reason*</label>
@@ -35,11 +35,15 @@ <h1 class="block-inria-title">{{ site.data.contacts.sub_title }}</h1>
         <input class="contacts__field" type="name" name="name" id="name" placeholder="Alex Howard" required="true">
       </div>
 
+      <div class="contacts__form-group">
+        <label class="contacts__form-label" for="email"> Your Email*</label>
+        <input class="contacts__field" type="email" name="email" id="email" placeholder="alexhoward@mail.com" required="true">
+      </div>
+
       <div class="contacts__form-group">
         <label class="contacts__form-label contacts__form-label" for="body">Provide the project details and your expectations in case of cooperating with our team</label>
         <textarea class="contacts__field" id="body" name="body" placeholder="Type here"></textarea>
       </div>
-
       <button class="button contacts__submit-btn" type="submit" id="send" type="submit">Send</button>
       <a class="contacts__field contacts__to-faq mb-4" href="/privacy_policy" data-link="transition">{{site.data.contacts.link_to_faq}}</a>
       <div class="contacts__after-send after-send">
@@ -52,4 +56,5 @@ <h2 class="message inria-bold">{{site.data.contacts.form.description.title}}</h2
       </div>
     </form>
   </div>
+  {% include modal.html %}
 </div>