Merge pull request #26 from BTI-US/master

Add email notification function
BTI-US · Apr 6, 2024 · 02de62a · 02de62a
2 parents 6a6f59f + 0153a6a
commit 02de62a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -394,7 +394,7 @@ <h5 class="modal-title">Contact Us</h5>
             <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-hidden="true">
                 <div class="modal-dialog" role="document">
                     <div class="modal-content">
-                        <form id="subscriptionForm">
+                        <form id="subscriptionForm" action="https://formspree.io/f/mvoevojo" method="POST">
                             <div class="modal-header">
                                 <h5 class="modal-title">Subscription</h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -403,7 +403,7 @@ <h5 class="modal-title">Subscription</h5>
                             </div>
                             <div class="modal-body">
                                 <div class="input-group contact-input mb-3">
-                                    <input type="email" id="subscriptionEmail" class="form-control box-bg" placeholder="Email Address" aria-label="Username">
+                                    <input type="email" name="email" id="subscriptionEmail" class="form-control box-bg" placeholder="Email Address" aria-label="Username">
                                 </div>
                                 <div id="subscriptionEmailError" class="error-message"></div>
                                 <div id="subscriptionSuccess" class="success-message"></div>
@@ -1230,25 +1230,25 @@ <h2 class="mb-0">
                 <div class="col-lg-4 mobile-space">
                     <div class="row">
                         <div class="col-lg-12">
-                            <form id="contactForm">
+                            <form id="contactForm" action="https://formspree.io/f/mvoevojo" method="POST">
                                 <div class="input-group contact-input mb-3">
                                     <div class="input-group-prepend">
                                         <span class="input-group-text faq-icon"><i class="fa fa-user-o" aria-hidden="true"></i>
                                         </span>
                                     </div>
-                                    <input type="text" id="userName" class="form-control box-bg" placeholder="Your Name" aria-label="Username">
+                                    <input type="text" name="username" id="userName" class="form-control box-bg" placeholder="Your Name" aria-label="Username">
                                 </div>
                                 <div id="nameError" class="error-message"></div>
                                 <div class="input-group contact-input mb-3">
                                     <div class="input-group-prepend">
                                         <span class="input-group-text faq-icon"><i class="fa fa-envelope-o" aria-hidden="true"></i>
                                         </span>
                                     </div>
-                                    <input type="email" id="userEmail" class="form-control box-bg" placeholder="Email Address" aria-label="Username">
+                                    <input type="email" name="email" id="userEmail" class="form-control box-bg" placeholder="Email Address" aria-label="Username">
                                 </div>
                                 <div id="emailError" class="error-message"></div>
                                 <div class="form-group">
-                                    <textarea id="userMessage" class="form-control box-bg" placeholder="Please provide the name of your favorite Disney animated character." rows="3"></textarea>
+                                    <textarea id="userMessage" name="message" class="form-control box-bg" placeholder="Please provide the name of your favorite Disney animated character." rows="3"></textarea>
                                 </div>
                                 <div id="messageError" class="error-message"></div> 
                                 <div id="messageSuccess" class="success-message"></div>

diff --git a/js/contact-form.js b/js/contact-form.js
@@ -39,6 +39,7 @@ document.getElementById('contactForm').addEventListener('submit', function(event
         var successMessageDiv = document.getElementById('messageSuccess');
         successMessageDiv.textContent = "Your action was successfully completed! We'll reply to you soon.";
         successMessageDiv.style.display = 'block';
+        document.getElementById('contactForm').submit();
 
         setTimeout(function() {
             successMessageDiv.style.display = 'none';
@@ -53,18 +54,14 @@ document.getElementById('subscriptionForm').addEventListener('submit', function(
     document.getElementById('subscriptionEmailError').textContent = '';
     document.getElementById('subscriptionSuccess').textContent = '';
 
-    let hasError = false;
-
     var email = document.getElementById('subscriptionEmail').value;
     var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
 
     if (email.trim() === '') {
         document.getElementById('subscriptionEmailError').textContent = 'Please enter your email address.';
-        hasError = true;
     }
     else if (!emailRegex.test(email)) {
         document.getElementById('subscriptionEmailError').textContent = 'Please enter a valid email address.';
-        hasError = true;
     }
     else {
         // If email is valid