Skip to content

Commit

Permalink
Fixed Icon Overlap and Alphabet Input Allowed in Phone Number Field
Browse files Browse the repository at this point in the history
  • Loading branch information
@rahul-metromax
rahul-metromax committed Oct 2, 2024
1 parent 00f6cdc commit 10e5f50
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 10 deletions.
4 changes: 4 additions & 0 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 10 additions & 10 deletions Html-files/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 10e5f50

Please sign in to comment.