contact form

Author: imsoumyasinha

src/Components/Footer/Footer.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import './Footer.css';
 
 export default function Footer() {
   return (
-    <footer className="footer mt-auto py-3 bg-light">
-      <div className="container">
+    <React.Fragment>
+      <footer className="card-footer">
         <span className="text-muted">@Jsons WebDev 2020</span>
-      </div>
-    </footer>
+      </footer>
+    </React.Fragment>
   )
 }

src/Components/Pages/Contact.jsx

@@ -15,38 +15,43 @@ const Contact = () => {
             <small>Let us know what kind of support you want</small>
           </div>
           <div className="col-6 mx-auto" id="form">
-            <Form>
-              <Form.Row>
-                <Col>
-                  <Form.Label>Full Name</Form.Label>
-                  <Form.Control type="text" placeholder="Enter name" required />
-                  <Form.Text className="text-muted">
-                    Please Enter your full name
-                  </Form.Text>
-                </Col>
-              </Form.Row>
-              <Form.Row>
-                <Col>
-                  <Form.Label>Email address</Form.Label>
-                  <Form.Control type="email" placeholder="Enter email" required />
-                  <Form.Text className="text-muted">
-                    We'll never share your email with anyone else.
-                  </Form.Text>
-                </Col>
-              </Form.Row>
-              <Form.Row>
-                <Col>
-                  <Form.Label>Your Business</Form.Label>
-                  <Form.Control type="text" placeholder="Describe your business" required />
-                  <Form.Text className="text-muted">
-                    We will provide our service based on type of business you have
-                  </Form.Text>
-                </Col>
-              </Form.Row>
-              <Button variant="primary" type="submit" onClick={formSubmit}>
-                Send Feedback
-                </Button>
-            </Form>
+            <form className="row g-3">
+              <div className="col-md-6">
+                <label htmlFor="firstName" class="form-label">First Name</label>
+                <input type="text" class="form-control" placeholder="Joe" id="firstName" name="fname" />
+              </div>
+              <div className="col-md-6">
+                <label htmlFor="lastName" className="form-label">Last Name</label>
+                <input type="text" className="form-control" placeholder="Lee" id="lastName" name="lname" />
+              </div>
+              <div class="col-12">
+                <label htmlFor="email" class="form-label">Email</label>
+                <input type="email" class="form-control" placeholder="j.lee@email.com" id="email" name="email" />
+              </div>
+              <div class="col-12">
+                <label htmlFor="phonenumber" class="form-label">Contact Number</label>
+                <input type="text" class="form-control" placeholder="Contact Number (optional)" id="phonenumber" name="contact" />
+              </div>
+              <div class="col-12">
+                <label htmlFor="businesstype" class="form-label">Business</label>
+                <input type="text" class="form-control" placeholder="Drugs & Chemist" id="businesstype" name="business" />
+              </div>
+              <div class="col-12">
+                <label htmlFor="message" class="form-label">Service</label>
+                <textarea type="text" class="form-control" placeholder="What's service you want from us" id="message" name="message"></textarea>
+              </div>
+              <div class="col-md-6">
+                <label htmlFor="inputCity" class="form-label">City</label>
+                <input type="text" class="form-control" id="inputCity" />
+              </div>
+              <div class="col-md-6">
+                <label for="inputZip" class="form-label">Zip</label>
+                <input type="text" class="form-control" id="inputZip" />
+              </div>
+              <div class="col-12">
+                <button type="submit" class="btn btn-primary">Your Feddback</button>
+              </div>
+            </form>
           </div>
         </div>
       </div>

src/Components/Pages/Pages.css

@@ -70,10 +70,6 @@ $navbar_color: #b753fe;
   }
 }
 
-#form {
-  margin: 10px auto;
-  padding: 10px 5px 0 5px;
-}
 
 .carousel-item img {
   object-fit: cover;