Trending Designs

Impressed by our work?

Hire us for exceptional web development services on Fiverr

How to build a Responsive Contact Us Page using Bootstrap 5 | Bootstrap 5 Tutorial

01 September
In this tutorial, we’ll create a modern and professional contact us page using HTML, CSS, and Bootstrap 5.

How to build a Responsive Contact Us Page using Bootstrap 5

In this video, we’ll learn how to create a responsive Contact Us page using HTML, CSS, and Bootstrap 5.
This design is perfect for any website that needs a professional and user-friendly contact section, whether it’s for a business, portfolio, or personal site.

Let's start coding..


Let's start with HTML CODE:


                            
                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Contact Form Bootstrap 5 </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

        <div class="container">
            <div class="contact-container bg-white">
                <h2 class="contact-header text-center text-dark mb-4 pb-2">Get In Touch</h2>
                <div class="row">
                    <div class="col-lg-8">
                        <form action="">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="" class="form-control" placeholder="Your Name" id="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="email" name="" class="form-control" required placeholder="Your Email" id="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="text" name="subject" placeholder="Subject" class="form-control" required id="">
                            </div>
                            <div class="form-group">
                                <textarea name="" class="form-control" placeholder="Your Message" rows="6" id=""></textarea>
                            </div>
                            <button type="submit" class="btn btn-dark w-100 btn-submit py-2 text-white border-0">Send Message</button>
                        </form>
                    </div>
                    <div class="col-lg-4">
                        <div class="contact-info bg-dark text-white rounded p-4">
                            <h3 class="mb-3 pb-2">Contact Info</h3>
                            <div class="contact-info-item d-flex mb-2">
                                <div class="contact-info-icon text-white me-2 fs-5">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div>
                                    <h5>Location</h5>
                                    <p>Karachi, Pakistan</p>
                                </div>
                            </div>
                            <div class="contact-info-item d-flex mb-2">
                                <div class="contact-info-icon text-white me-2 fs-5">
                                    <i class="fas fa-phone"></i>
                                </div>
                                <div>
                                    <h5>Phone</h5>
                                    <p>+923162859445</p>
                                </div>
                            </div>
                            <div class="contact-info-item d-flex mb-2">
                                <div class="contact-info-icon text-white me-2 fs-5">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <div>
                                    <h5>Email</h5>
                                    <p>theproviders98@gmail.com</p>
                                </div>
                            </div>
                            <div class="social-icons mt-4">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

Now CSS code (Internal styling):


                            
                                <style>
    body{
        background-color: #f8f9fa;
        color: #212529;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .contact-container{
        border-radius: 10px;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
        margin: 50px auto;
        padding: 30px;
        max-width: 900px;
    }
    .form-control{
        border: 1px solid #ced4da;
        padding: 12px 15px;
        margin-bottom: 25px;
        transition: all 0.3s;
    }
    .form-control:focus{
        border-color: #000;
        box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
    }
    .btn-submit{
        font-weight: 600;
        transition: all 0.3s;
    }
    .btn-submit:hover{
        background-color: #333;
        transform: translateY(-2px);
    }
    .contact-info h3{
        position: relative;
    }
    .contact-info h3:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 2px;
        background: #fff;
    }
    .social-icons a{
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #fff;
        color: #000;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        margin-right: 10px;
        transition: all 0.3s;
    }
    .social-icons a:hover{
        background-color: #333;
        color: #fff;
        transform: translateY(-3px);
    }
    @media (max-width: 991px) {
        .contact-info{
            margin-top: 30px;
        }
    }
    @media (max-width: 450px){
        .social-icons a{
            margin-right: 5px;
        }
    }
</style>


Download Code Files


Share This Post :




Follow Us

Recent Post

Most Popular Post

Categories

Related Post