Merge pull request #1619 from efshaperveen/main

added validation field and tooltips in contact form
PriyaGhosal · Oct 28, 2024 · 9c21012 · 9c21012
2 parents c880e60 + 9068c84
commit 9c21012
Showing 1 changed file with 37 additions and 4 deletions.
diff --git a/contact.html b/contact.html
@@ -65,6 +65,7 @@
         max-width: 100%;
         height: auto;
         max-height: 500px;
+        margin-top: 60px;
     }
 
     .form-group {
@@ -121,6 +122,34 @@
             min-width: 100%;
         }
     }
+     /* .form-group { 
+    position: relative;
+}  */
+
+.tooltip {
+    visibility: hidden;
+    background-color:  black;
+    color: #fff;
+    width: 200px;
+    text-align: center;
+    padding: 3px;
+    border-radius: 5px;
+    position: absolute;
+    z-index: 1;
+    /* bottom: 30%; Position above the input field */
+    top: 41%;
+    left: 60%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 12px;
+}
+
+.form-group:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
 
 </style>
 <body>
@@ -168,22 +197,26 @@ <h2>Contact Us</h2>
                         <form id="contactForm">
                             <div class="form-group">
                                 <label for="name">Name</label>
-                                <input type="text" id="fullname" name="fullname" placeholder="Your name">
+                                <input type="text" id="fullname" name="fullname" placeholder="Your name" required>
+                                <div class="tooltip">Please enter your full name here.</div> 
                                 <span class="error-message" id="nameError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="email">Email</label>
-                                <input type="email" id="email" name="email" placeholder="Your email">
+                                <input type="email" id="email" name="email" placeholder="Your email" required>
+                                <div class="tooltip">Please enter a valid email like [email protected].</div>
                                 <span class="error-message" id="emailError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="phone">Phone Number</label>
-                                <input type="tel" id="phone" name="phone" placeholder="Your phone number">
+                                <input type="tel" id="phone" name="phone" placeholder="Your phone number" required>
+                                <div class="tooltip">Please enter your phone number(10 digits).</div>
                                 <span class="error-message" id="phoneError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="message">Message</label>
-                                <textarea id="message" name="message" placeholder="Your message"></textarea>
+                                <textarea id="message" name="message" placeholder="Your message" required></textarea>
+                                <div class="tooltip">Feel free to describe your message in detail.</div>
                                 <span class="error-message" id="messageError"></span>
                             </div>
                             <button type="submit">Send</button>