-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implemented Responsive Contact Us Component (#74)
* Implement Contact Us component * Add validation to Contact Us component
- Loading branch information
1 parent
9ba0926
commit d8338ea
Showing
2 changed files
with
127 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,93 @@ | ||
|
|
||
| .contact-form{ | ||
| background: #fff; | ||
| margin-top: 10%; | ||
| margin-bottom: 5%; | ||
| width: 70%; | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| .contact-form .form-control{ | ||
| border-radius:1rem; | ||
| .contact-form{ | ||
| background: #fff; | ||
| height: 619px; | ||
| width: 1512px; | ||
| max-width: 600px; | ||
| margin: 0 auto; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .contact-form form{ | ||
| padding: 14%; | ||
| .form-row { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-between; | ||
| } | ||
| .contact-form form .row{ | ||
| margin-bottom: -7%; | ||
| .form-group { | ||
| flex-basis: calc(50% - 10px); | ||
| margin-bottom: 10px; | ||
| } | ||
| .contact-form h3{ | ||
| margin-bottom: 8%; | ||
| margin-top: -10%; | ||
| color: #000; | ||
| font-family: Roboto; | ||
| font-size: 40px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| margin-top: 29px; | ||
| margin-bottom: 20px; | ||
| text-align: center; | ||
| color: #0062cc; | ||
| } | ||
| .contact-form .btnContact { | ||
| width: 50%; | ||
| border: none; | ||
| border-radius: 1rem; | ||
| padding: 1.5%; | ||
| background: #bd9206; | ||
| font-weight: 600; | ||
| color: #fff; | ||
| cursor: pointer; | ||
| .form-control{ | ||
| border-radius:0.3rem; | ||
| color: var(--input-border, #9E9E9E); | ||
| font-family: Roboto; | ||
| font-size: 26px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| width: 100%; | ||
| padding: 10px; | ||
| margin: 5px 0; | ||
| border: 1px solid #ccc; | ||
| } | ||
| .error-msg{ | ||
| font-family: Roboto; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| color: red; | ||
| padding-left: 5px; | ||
| } | ||
| .btnContactSubmit | ||
| .contact-form .btnContact | ||
| { | ||
| width: 70%; | ||
| border-radius: 1rem; | ||
| padding: 1.5%; | ||
| width: 274px; | ||
| height: 67px; | ||
| border-radius: 15px; | ||
| padding: 10px 20px; | ||
| background-color: #bd9206; | ||
| color: #fff; | ||
| background-color: #0062cc; | ||
| border: none; | ||
| cursor: pointer; | ||
| text-align: center; | ||
| font-family: Roboto; | ||
| font-size: 29px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| } | ||
| .form-group .form-control { | ||
| margin-right: 10px; | ||
| } | ||
| .text-center { | ||
| text-align: center; | ||
| } | ||
| @media (max-width: 768px) { | ||
| .contact-form { | ||
| padding: 20px; | ||
| width: 100%; | ||
| margin: 0 auto; | ||
| } | ||
| .form-group { | ||
| flex-basis: 100%; | ||
| } | ||
| .form-control[type="textarea"] { | ||
| width: 100%; | ||
| height: 200px; | ||
| } | ||
| .form-control[type="text"] { | ||
| width: 100%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,55 @@ | ||
| <link href="contactus.css" rel="stylesheet"> | ||
| <div class="container contact-form"> | ||
| <form method="post"> | ||
| <h3>Send us message </h3> | ||
| <div class="row"> | ||
| <div class="col-md-6"> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link href="contactus.css" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <div class="contact-form"> | ||
| <form method="post" onsubmit="return validateForm();"> | ||
| <h3>Send us a message</h3> | ||
| <div class="form-row"> | ||
| <div class="form-group"> | ||
| <input type="text" name="txtName" class="form-control" placeholder="First Name" value="" /> | ||
| </div><br> | ||
| <input type="text" name="txtFirstName" class="form-control" placeholder="First Name" value="" required /> | ||
| </div> | ||
| <div class="form-group"> | ||
| <input type="text" name="txtName" class="form-control" placeholder="Last Name" value="" /> | ||
| </div><br> | ||
| <input type="text" name="txtLastName" class="form-control" placeholder="Last Name" value="" required /> | ||
| </div> | ||
| </div> | ||
| <div class="form-row"> | ||
| <div class="form-group"> | ||
| <input type="text" name="txtPhone" class="form-control" placeholder="Mobile Number" value="" /> | ||
| </div><br> | ||
| <input type="text" name="txtPhone" class="form-control" placeholder="Mobile Number" value="" required pattern="[0-9]{10}" /> | ||
| <span class="error-msg" id="phone-error"></span> | ||
| </div> | ||
| <div class="form-group"> | ||
| <input type="text" name="txtemail" class="form-control" placeholder="Email" value="" /> | ||
| </div><br> | ||
| <div class="col-md-6"> | ||
| <div class="form-group"> | ||
| <textarea name="txtemsg" class="form-control" placeholder="message" style="width: 100%; height: 150px;"></textarea> | ||
| </div><br> | ||
| <input type="text" name="txtEmail" class="form-control" placeholder="Email" value="" required pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}" /> | ||
| <span class="error-msg" id="email-error"></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="form-group"> | ||
| <input type="submit" name="btnSubmit" class="btnContact" value="Send" /> | ||
| <textarea name="txtMsg" class="form-control" placeholder="Message" required></textarea> | ||
| </div> | ||
| <div class="form-group text-center"> | ||
| <input type="submit" name="btnSubmit" class="btnContact" value="Send" /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <script> | ||
| function validateForm() { | ||
| document.getElementById('phone-error').textContent = ''; | ||
| document.getElementById('email-error').textContent = ''; | ||
| const phoneNumber = document.querySelector('input[name="txtPhone"]').value; | ||
| if (!/^[0-9]{10}$/.test(phoneNumber)) { | ||
| document.getElementById('phone-error').textContent = 'Invalid phone number format'; | ||
| return false; | ||
| } | ||
| const email = document.querySelector('input[name="txtEmail"]').value; | ||
| if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(email)) { | ||
| document.getElementById('email-error').textContent = 'Invalid email format'; | ||
| return false; | ||
| } | ||
| return true; | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |