Merge pull request #1054 from Ishika-Gupta06/feature/subscriptionFormat

Email validation checker while subscribing
mansiruhil · Oct 24, 2024 · fcb20d9 · fcb20d9
2 parents 8c80dd0 + 2fc2c78
commit fcb20d9
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 9 deletions.
diff --git a/contact.html b/contact.html
@@ -187,6 +187,7 @@
                 /* End at original position */
             }
         }
+
         .map {
             width: 860px;
             height: 400px;
@@ -350,17 +351,50 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h
                     </div>
                 </div>
 
+                <!-- Newsletter Subscription -->
                 <!-- Newsletter Subscription -->
                 <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our
-                        Newsletter</h3>
-                    <form action="#">
-                        <input type="email" placeholder="Your Email"
+                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+                    <form id="newsletter-form" action="#">
+                        <input type="email" id="newsletter-email" placeholder="Your Email"
                             style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
                         <button type="submit"
-                            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
+                            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">
+                            Subscribe
+                        </button>
                     </form>
+                    <div id="subscription-notification" style="display:none; background-color: rgba(212, 237, 218, 0.8); color: #155724; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 600px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);">
+                        Thank you for subscribing to our newsletter!
+                    </div>
+
                 </div>
+                <script>
+                    document.querySelector("form").addEventListener("submit", function(event) {
+                        event.preventDefault(); // Prevent form from submitting immediately
+
+                        // Improved Email validation regex to ensure proper domain like "gmail.com"
+                        const emailInput = document.querySelector("input[type='email']");
+                        const emailRegex = /^[^\s@]+@gmail\.com$/;
+
+                        if (emailRegex.test(emailInput.value)) {
+                            // Show alert notification with green translucent box
+                            const notification = document.getElementById("subscription-notification");
+                            notification.style.display = "block";
+
+                            // Hide the message after 3 seconds
+                            setTimeout(function() {
+                                notification.style.display = "none";
+                            }, 3000);
+
+                            // Reset the form
+                            this.reset();
+                        } else {
+                            alert("Please enter a valid Gmail address.");
+                        }
+                    });
+                </script>
+
+
             </div>
         </div>
         <hr>
@@ -431,5 +465,4 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
 
 </body>
 
-
 </html>
diff --git a/index.html b/index.html
@@ -605,7 +605,7 @@ <h2>Contact Us</h2>
     </div>
   </div>
 
-  <!-- FAQ section ends here ... --> 
+  <!-- FAQ section ends here ... -->
 
 
   <!-- footer start here -->
@@ -663,7 +663,7 @@ <h2>Follow Us</h2>
 
     </div>
   </footer>
-  
+
 
 
 
@@ -787,7 +787,7 @@ <h2>Follow Us</h2>
 
 
 
-  
+
   <a href="chatbot.html">
     <div class="fixed bottom-0 right-2 chatbot-container">
       <button class="chatbot-button group">

diff --git a/team.html b/team.html
@@ -473,7 +473,36 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
                     <button type="submit"
                         style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
                 </form>
+                <div id="subscription-notification" style="display:none; background-color: rgba(212, 237, 218, 0.8); color: #155724; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 600px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);">
+                    Thank you for subscribing to our newsletter!
+                </div>
             </div>
+            <script>
+                document.querySelector("form").addEventListener("submit", function(event) {
+                    event.preventDefault(); // Prevent form from submitting immediately
+
+                    // Improved Email validation regex to ensure proper domain like "gmail.com"
+                    const emailInput = document.querySelector("input[type='email']");
+                    const emailRegex = /^[^\s@]+@gmail\.com$/;
+
+                    if (emailRegex.test(emailInput.value)) {
+                        // Show alert notification with green translucent box
+                        const notification = document.getElementById("subscription-notification");
+                        notification.style.display = "block";
+
+                        // Hide the message after 3 seconds
+                        setTimeout(function() {
+                            notification.style.display = "none";
+                        }, 3000);
+
+                        // Reset the form
+                        this.reset();
+                    } else {
+                        alert("Please enter a valid Gmail address.");
+                    }
+                });
+            </script>
+
         </div>
     </footer>
         <script src="preloader.js"></script>