From 10e5f50c35bdcd0633a7968cd459cc144729d322 Mon Sep 17 00:00:00 2001
From: rahul-metromax <Rahulkumar@themetromaxgroup.com>
Date: Wed, 2 Oct 2024 18:21:59 +0530
Subject: [PATCH] Fixed Icon Overlap and Alphabet Input Allowed in Phone Number
 Field

---
 Css-files/content.css   |  4 ++++
 Html-files/contact.html | 20 ++++++++++----------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/Css-files/content.css b/Css-files/content.css
index 34109389..5f5bde27 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -499,6 +499,10 @@ textarea {
         transform: translateY(-50%); /* Center the icon vertically */
         color: gray; /* Icon color */
     }
+.input-icon input, 
+.input-icon textarea {
+      padding-left: 30px; /* Adjust padding to create space for the icon */
+}
 
 #contactForm {
   display: flex;
diff --git a/Html-files/contact.html b/Html-files/contact.html
index 6fbb4296..1bef037d 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -320,23 +320,23 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
                                         <div class="row">
                                             <div class="col-md-6">
                                                 <div class="form-group">
-                                                    <label for="form_name" style="font-family: Georgia;">Email *</label>
+                                                    <label for="form_email" style="font-family: Georgia;">Email *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-envelope"></i>
-                                                        <input id="form_name" type="text" name="name" class="form-control"
-                                                            placeholder="     Please enter your Email*" required="required"
-                                                            data-error="  Valid Email is required.">
+                                                        <input id="form_email" type="email" name="email" class="form-control"
+                                                            placeholder="Please enter your email*" required="required"
+                                                            data-error="Valid Email is required.">
                                                     </div>
                                                 </div>
                                             </div>
                                             <div class="col-md-6">
                                                 <div class="form-group">
-                                                    <label for="form_lastname" style="font-family: Georgia;">Phone number *</label>
+                                                    <label for="form_phone" style="font-family: Georgia;">Phone number *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-phone"></i>
-                                                        <input id="form_lastname" type="text" name="surname" class="form-control"
-                                                            placeholder="     Please enter your Phone number*" required="required"
-                                                            data-error="  Phone number is required.">
+                                                        <input id="form_phone" type="tel" name="phone" class="form-control"
+                                                            placeholder="Please enter your phone number*" required="required"
+                                                            pattern="[0-9]{10}" data-error="Phone number is required.">
                                                     </div>
                                                 </div>
                                             </div>
@@ -347,8 +347,8 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
                                                     <label for="form_email" style="font-family: Georgia;">Name *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-user"></i>
-                                                        <input id="form_email" type="email" name="email" class="form-control"
-                                                            placeholder="     Please enter your Name*" required="required"
+                                                        <input id="form_name" type="text" name="name" class="form-control"
+                                                            placeholder="Please enter your name*" required="required"
                                                             data-error="Name is required.">
                                                     </div>
                                                 </div>