ContactForm.js 4.12 KB
import React, { useState } from "react";
import Link from "next/link";
import GoogleMap from "./GoogleMap";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/reuseables/Heading";
const ContactForm = () => {
  return (
    <>
      <div className="contact-area ptb-100">
        <Container>
          <Row>
            <Col lg={6} sm={12}>
              <GoogleMap />
            </Col>

            <Col lg={6} sm={12}>
              <div className="contact-form">
                <span className="sub-title">SEND MESSAGE</span>
                <Heading heading="Write to Us!" />
                <p>
                  Have a quick question or need more information? Fill out the
                  form below, and we'll get back to you as soon as possible
                </p>

                <form>
                  <Row>
                    <Col lg={6} md={6} sm={6}>
                      <div className="form-group">
                        <input
                          type="text"
                          name="name"
                          placeholder="Name"
                          className="form-control"
                          value=""
                          required
                        />
                      </div>
                    </Col>
                    <Col lg={6} md={6} sm={6}>
                      <div className="form-group">
                        <input
                          type="text"
                          name="email"
                          placeholder="Email"
                          className="form-control"
                          required
                        />
                      </div>
                    </Col>
                    <Col lg={6} md={6} sm={6}>
                      <div className="form-group">
                        <input
                          type="text"
                          name="number"
                          placeholder="Phone number"
                          className="form-control"
                          required
                        />
                      </div>
                    </Col>
                    <Col lg={6} md={6} sm={6}>
                      <div className="form-group">
                        <input
                          type="text"
                          name="subject"
                          placeholder="Subject"
                          className="form-control"
                          required
                        />
                      </div>
                    </Col>
                    <Col lg={12} md={12} sm={6}>
                      <div className="form-group">
                        <textarea
                          name="text"
                          cols="30"
                          rows="6"
                          placeholder="Write your message..."
                          className="form-control"
                          required
                        />
                      </div>
                    </Col>
                    <Col lg={12} md={12} sm={12}>
                      <div className="form-check">
                        <input
                          type="checkbox"
                          className="form-check-input"
                          id="checkme"
                        />
                        <label className="form-check-label" htmlFor="checkme">
                          Accept
                          <Link href="/terms-conditions">
                            Terms of Services
                          </Link>
                          and <Link href="/privacy-policy">Privacy Policy</Link>
                        </label>
                      </div>
                    </Col>
                    <Col lg={12} md={12} sm={12}>
                      <button type="submit" className="default-btn">
                        Send Message <i className="ri-arrow-right-line"></i>
                      </button>
                    </Col>
                  </Row>
                </form>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default ContactForm;