Updated Support form with issues

css/style.css

@@ -7,7 +7,7 @@
   font-family: 'Poppins',sans-serif;
 }
 body{
-  height: 100vh;
+  height: 127vh;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,32 +44,14 @@ body{
     padding: 6px 0;
     font-size: 14px;
 }
-.req-error{
-   color: red;
-    font-weight: 400;
-    display: inline-block;
-    padding: 6px 0;
-    font-size: 14px;
-}
 
-.text-area {
-    height: 100px;
-    width: 100%;
-    outline: none;
-    font-size: 16px;
-    border-radius: 5px;
-    padding-left: 15px;
-    border: 1px solid #ccc;
-    border-bottom-width: 2px;
-    transition: all 0.3s ease;
-}
+
 .department-details {
     margin-bottom: 15px;
 }
 .content form .user-details{
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 100%;
   margin: 20px 0 12px 0;
 }
 form .user-details .input-box{
@@ -83,7 +65,7 @@ form .input-box span.details{
 }
 .user-details .input-box input{
   height: 45px;
-  width: 100%;
+  width: 150%;
   outline: none;
   font-size: 16px;
   border-radius: 5px;
@@ -96,46 +78,19 @@ form .input-box span.details{
 .user-details .input-box input:valid{
   border-color: #9b59b6;
 }
- form .gender-details .dpt-title{
-  font-size: 20px;
-  font-weight: 500;
- }
- form .category{
-   display: flex;
-   width: 80%;
-   margin: 14px 0 ;
-   justify-content: space-between;
- }
- form .category label{
-   display: flex;
-   align-items: center;
-   cursor: pointer;
- }
- form .category label .dot{
-  height: 18px;
-  width: 18px;
-  border-radius: 50%;
-  margin-right: 10px;
-  background: #d9d9d9;
-  border: 5px solid transparent;
-  transition: all 0.3s ease;
+  ul.ul-list {
+    padding: 0 0 10px 20px;
+}
+.error-div {
+    margin: auto;
 }
- #dot-1:checked ~ .category label .one,
- #dot-2:checked ~ .category label .two,
- #dot-3:checked ~ .category label .three{
-   background: #9b59b6;
-   border-color: #d9d9d9;
- }
- /*form input[type="radio"]{
-   display: none;
- }*/
  form .button{
    height: 45px;
-   margin: 35px 0
+   text-align: center;
  }
  form .button input{
    height: 100%;
-   width: 100%;
+   width: 50%;
    border-radius: 5px;
    border: none;
    color: #fff;
@@ -163,7 +118,7 @@ form .user-details .input-box{
   }
   .content form .user-details{
     max-height: 360px;
-    overflow-y: scroll;
+    /*overflow-y: scroll;*/
   }
   .user-details::-webkit-scrollbar{
     width: 5px;

includes/form-validation.php

@@ -25,7 +25,7 @@
         $nameEmptyErr = '<div class="error"> Name can not be left blank. </div>';
         $validate = false;
     } elseif (!preg_match("/^[a-zA-Z ]*$/", $name)) {
-        $nameErr = '<div class="error"> Only letters and white space allowed. </div>';
+        $nameErr = '<div class="error"> Only letters and white space allowed in a Name. </div>';
         $validate = false;
     }
 
@@ -62,22 +62,17 @@
          $validate = false;
     }
 
-    //
+    //Message Validation
     if (empty($message)) {
          $messageEmptyErr = '<div class="error"> Message is required. </div>';
          $validate = false;
     }
 
-
-    if ($validate == true) {
-        $customerObj = new Customer();
-        $customerObj->add_customer_details();
-    }
 }
 function checkInput($input)
 {
     $input = trim($input);
     $input = stripslashes($input);
     $input = htmlspecialchars($input);
     return $input;
-}
+}

index.php

@@ -1,14 +1,60 @@
 <?php
 
 include('includes/header.php');
-include('includes/functions.php');
-
-$customerObj = new Customer();
+include('includes/form-validation.php');
 
 ?>
-<div class="success-box">
-    <?php echo "You have Registerd Successfully";?>
-    <a href="add.php">Register here</a>
-
+<div class="container">
+<div class="title">Support Us</div>
+<div class="content">
+  <form action="" method="post">
+    <div class="user-details">
+      <!---Errors--->
+      <div class="error-div"><?php  
+          echo $nameEmptyErr; echo $nameErr; 
+          echo $emailEmptyErr; echo $emailErr;
+          echo $phoneEmptyErr;echo $phoneErr;
+          echo $messageEmptyErr;
+          echo $DeptEmptyErr;
+          echo $subjectEmptyErr;
+        ?>
+      </div>
+      <div class="input-box">
+        <div class="details"> Full Name. </div>
+        <input type="text" name="name" placeholder="Namee"
+        value="<?php echo isset($_POST['name']) ? $_POST['name'] : '' ?>" required>
+      </div>
+      <div class="input-box">
+        <div class="details">Email Id</div>
+        <input type="text" name="email" placeholder="example@example.com" value="<?php echo isset($_POST['email']) ? $_POST['email'] : '' ?>" required>
+      </div>
+      <div class="input-box">
+        <div class="details">Phone No. </div>
+        <input type="text" name="phone" placeholder="Number only" value="<?php echo isset($_POST['phone']) ? $_POST['phone'] : '' ?>" required>
+      </div>
+      <div class="input-box">
+        <div class="details">Messages. </div>
+        <input type="text" name="message" placeholder="Enter you're problem descrption or any coments" value="<?php echo isset($_POST['message']) ? $_POST['message'] : '' ?>" required>
+      </div>
+      <div class="input-box">
+        <div class="details">Dipartment
+          <ul class="ul-list">
+            <li>Billing.</li>
+            <li>Shiping</li>
+            <li>Qualiity</li>
+          </ul>
+        </div>
+        <input type="text" name="dept" placeholder="Enter Option" value="<?php echo isset($_POST['dept']) ? $_POST['dept'] : '' ?>"  required>
+      </div>
+      <div class="input-box">
+        <div class="details">Subjects </div>
+        <input type="text" name="subject" value="<?php echo isset($_POST['subject']) ? $_POST['subject'] : '' ?>" placeholder="You're Subject" required>
+      </div>
+    </div>
+    <div class="button">
+      <input type="submit" name ="submit" value="Submeit">
+    </div>
+  </form>
+</div>
 </div>
 <?php include('includes/footer.php');?>