From d8338ea0f58d32973824690d293af2add1f30056 Mon Sep 17 00:00:00 2001
From: Janani Balasooriya
 <94961626+Janani-Balasooriya@users.noreply.github.com>
Date: Sat, 14 Oct 2023 07:53:03 +0530
Subject: [PATCH] Implemented Responsive Contact Us Component (#74)

* Implement Contact Us component

* Add validation to Contact Us component
---
 components/contactus.css | 110 ++++++++++++++++++++++++++++-----------
 components/contactus.php |  71 ++++++++++++++++---------
 2 files changed, 127 insertions(+), 54 deletions(-)
diff --git a/components/contactus.css b/components/contactus.css
index f435ec8..80bdf3f 100644
--- a/components/contactus.css
+++ b/components/contactus.css
@@ -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%;
+    }
 }
\ No newline at end of file
diff --git a/components/contactus.php b/components/contactus.php
index f405d06..14b6cfa 100644
--- a/components/contactus.php
+++ b/components/contactus.php
@@ -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>
\ No newline at end of file
+        </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>
\ No newline at end of file
