Merge pull request #315 from Sravan-kumar04/feature/phone

Enhance Contact Form: Phone Validation with Country Code & Future-Date Restriction (Replaces #257)

Author: gyanshankar1708

src/contact.html

@@ -7,7 +7,9 @@
     <title>Contact Us - GrowCraft</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
 <link rel="stylesheet" href="/src/scroll-after-submit.css">
-
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />
+<link rel="stylesheet" href="./css/style.css">
+<link rel="stylesheet" href="phonevalidator.css" />
 
     <link
       rel="stylesheet"
@@ -476,8 +478,8 @@ <h2 class="text-center mb-4 text-bold text-white">Send Us a Message</h2>
             <input type="email" class="form-control" required />
           </div>
           <div class="col-md-6">
-            <label class="form-label">Phone Number</label>
-            <input type="text" class="form-control" />
+            <label class="form-label">Phone Number *</label>
+            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Enter your phone number" maxlength="15" required/>
           </div>
           <div class="col-md-6">
             <label class="form-label">Company/Organization</label>
@@ -512,7 +514,7 @@ <h2 class="text-center mb-4 text-bold text-white">Send Us a Message</h2>
           </div>
           <div class="col-md-6">
             <label class="form-label">Preferred Date</label>
-            <input type="date" class="form-control" />
+            <input type="date" class="form-control" id="PreferredDate" name="PreferredDate" required/>
           </div>
           <div class="col-md-6">
             <label class="form-label">Preferred Time</label>
@@ -692,5 +694,9 @@ <h4>GrowCraft</h4>
         });
     </script>
      <script src="/src/scroll-after-submit.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
+      <script src="./phone-validation.js"></script>
   </body>
       </html>

src/css/style.css

@@ -1237,3 +1237,67 @@ body.dark-mode .contact-btn:hover {
   background: linear-gradient(135deg, #2563eb, #4f46e5);
   transform: translateY(-2px);
 }
+
+
+
+.navbar.bg-body-tertiary .navbar-nav .nav-link {
+  color: #000;
+}
+
+/* Dark mode text color */
+[data-bs-theme="dark"] .navbar .nav-link {
+  color: #fff;
+}
+
+/* Hover color in both modes */
+.navbar .nav-link:hover {
+  color: #28a745;
+}
+
+
+.form-section .iti__country-list {
+  background-color: #222 !important;
+  color: #fff !important;
+}
+
+.form-section .iti__country-list .iti__country {
+  color: #fff !important;
+}
+
+.form-section .iti__country-list .iti__dial-code {
+  color: #ccc !important;
+}
+
+.form-section .iti__country-list .iti__highlight {
+  background-color: #444 !important;
+}
+
+
+.form-section label {
+  font-weight: 500;
+}
+
+.form-section .form-control,
+.form-section .form-select {
+  border-radius: 6px;
+}
+
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-mode a,
+body.dark-mode nav,
+body.dark-mode nav a {
+  color: #ffffff;
+}
+
+body.light-mode {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+body.light-mode nav a {
+  color: #000000;
+}

src/phone-validation.js

@@ -0,0 +1,42 @@
+const phoneInputField = document.querySelector("#phone");
+const iti = window.intlTelInput(phoneInputField, {
+  preferredCountries: ["in", "us", "gb"],
+  separateDialCode: true,
+  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
+});
+
+phoneInputField.addEventListener("input", () => {
+  phoneInputField.value = phoneInputField.value.replace(/\D/g, "");
+});
+
+document.getElementById("contactForm").addEventListener("submit", function (e) {
+  e.preventDefault();
+
+  if (!iti.isValidNumber()) {
+    phoneInputField.classList.add("is-invalid");
+    return;
+  } else {
+    phoneInputField.classList.remove("is-invalid");
+  }
+  const fullPhoneNumber = iti.getNumber();
+  console.log("Full phone number:", fullPhoneNumber);
+
+  this.submit();
+});
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    const dateInput = document.getElementById("PreferredDate");
+    const today = new Date().toISOString().split("T")[0]; 
+    dateInput.setAttribute("min", today);
+  });
+
+  document
+    .getElementById("contactForm")
+    .addEventListener("submit", function (e) {
+      if (!this.checkValidity()) {
+        e.preventDefault();
+        e.stopPropagation();
+        alert("Please fill all required fields.");
+      }
+    });

src/phonevalidator.css

@@ -0,0 +1,47 @@
+#phone.is-invalid {
+  border-color: red;
+}
+
+.iti {
+  width: 100%;
+}
+
+
+#phone {
+  border: 1px solid #ccc;
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#phone:focus {
+  border-color: #007BFF;
+  outline: none;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+
+
+.is-invalid {
+  border-color: #dc3545 !important;
+  background-color: rgba(220, 53, 69, 0.1);
+}
+
+
+body.dark-mode .form-label,
+body.dark-mode .form-control,
+body.dark-mode .form-select {
+  color: #fff !important;
+}
+
+body.dark-mode .form-control {
+  background-color: #222 !important;
+  border-color: #444;
+}
+
+body.dark-mode .form-select {
+  background-color: #222 !important;
+  border-color: #444;
+}