Bootstrap 4 Contact Form With Map

Bootstrap 4 contact form is designed with a Google map. Contact form page design HTML is created by using Bootstrap and custom CSS. The form is more pretty and useful according to users because here users can see the full address on the map and send the message you from the same place.

HTML

<!-- Contact Us Section -->
<section class="contact-us">
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <div class="section-title">
                    <h2>Contact Us</h2>
                    <p><b>Bootstrap 4 contact form</b> is designed with a Google map. contact form pages design is created by using Bootstrap and custom CSS</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-7">
                <form action="/" class="mb-4 mb-lg-0">
                    <div class="form-row">
                        <div class="col-md-6 form-group">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" />
                        </div>
                        <div class="col-md-6 form-group">
                            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" />
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" />
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="message" placeholder="Type Message"></textarea>
                    </div>
                    <button type="submit" class="btn btn-light">Contact Now</button>
                </form>
            </div>

            <div class="col-lg-5">
                <div class="map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3571289.733943155!2d76.08560099999998!3d29.058775699999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390e4a4b98404f57%3A0x75ffae70833e8448!2sShahbad%2C%20Haryana%20136135!5e0!3m2!1sen!2sin!4v1594195370933!5m2!1sen!2sin" width="100%" height="350" frameborder="0" style="border: 0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Contact Us Section -->

CSS

.contact-us {
    padding: 70px 0px;
    background: #795548;
}
.section-title h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-bottom: 5px solid #af8070;
    padding-bottom: 10px;
    display: inline-block;
}
.section-title p {
    color: #e8e8e8;
    margin-bottom: 30px;
}
.contact-us input,
.contact-us textarea {
    background: #fafafa;
}
.contact-us textarea {
    min-height: 188px;
    max-width: 100%;
}
.contact-us .map {
    overflow: hidden;
    border-radius: 4px;
}