Responsive Contact Form Popup Using HTML CSS JS

Create a modern Responsive Contact Form Popup using HTML, CSS, and JavaScript. This tutorial includes a stylish two-column popup design with an image section, contact form, Font Awesome icons, animated close button, and fully responsive mobile layout. The popup opens with a button click, closes with the outside overlay or close icon, and provides a clean user experience suitable for business, portfolio, agency, and landing page websites. Download the complete source code and customize it for your next web development project.

index.html

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Contact Form Popup Using HTML CSS JavaScript Code By Mycodingtutorial</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <button class="contact-btn" id="openPopup">Contact Us</button>

        <div class="popup" id="popup">

            <div class="popup-wrapper">

                <span class="close-btn" id="closePopup">×</span>

                <div class="popup-box">

                    <!-- Left Side -->
                    <div class="popup-image">

                        <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=800" alt="">

                        <div class="image-content">
                            <h2>Let's Build<br>Something <span>Great</span> Together!</h2>

                            <p>
                                We're here to help and answer any question you might have.
                            </p>
                        </div>

                    </div>

                    <!-- Right Side -->
                    <div class="popup-form">

                        <h2>Get In Touch</h2>

                        <p>Fill out the form and we'll contact you shortly.</p>

                        <form>

                            <div class="input-box">
                                <i class="fa fa-user"></i>
                                <input type="text" placeholder="Your Name">
                            </div>

                            <div class="input-box">
                                <i class="fa fa-envelope"></i>
                                <input type="email" placeholder="Email Address">
                            </div>

                            <div class="input-box">
                                <i class="fa fa-phone"></i>
                                <input type="tel" placeholder="Phone Number">
                            </div>

                            <div class="input-box textarea">
                                <i class="fa fa-pencil"></i>
                                <textarea placeholder="Your Message"></textarea>
                            </div>

                            <button class="submit-btn">
                                <i class="fa fa-paper-plane"></i>
                                Send Message
                            </button>

                        </form>

                    </div>

                </div>

            </div>

        </div>
    </body>
</html>

<script>
    const popup = document.getElementById("popup");

document.getElementById("openPopup").onclick = function () {
    popup.style.display = "flex";
}

document.getElementById("closePopup").onclick = function () {
    popup.style.display = "none";
}

window.onclick = function(e){
    if(e.target==popup){
        popup.style.display="none";
    }
}
</script>

style.css

    /* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
}

/* Open Button */
.contact-btn{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:15px 35px;
    border:none;
    border-radius:8px;
    background:#0b1f4d;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

/* Popup */
.popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:none;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:9999;
}

.popup-wrapper{
    position:relative;
}

/* Close Button */
.close-btn{
    position:absolute;
    right:-18px;
    top:-18px;
    width:46px;
    height:46px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#111;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    transition:.3s;
}

.close-btn:hover{
    transform:rotate(90deg);
}

/* Popup Box */
.popup-box{
    width:900px;
    max-width:100%;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    display:flex;
    box-shadow:0 20px 60px rgba(0,0,0,.2);
}

/* Left Side */
.popup-image{
    width:45%;
    position:relative;
}

.popup-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.popup-image::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to right,
    rgba(0,0,0,.55),
    rgba(0,0,0,.25));
}

.image-content{
    position:absolute;
    left:40px;
    bottom:55px;
    color:#fff;
    z-index:2;
}

.image-content h2{
    font-size:42px;
    line-height:1.15;
    font-weight:700;
    margin-bottom:20px;
}

.image-content span{
    color:#ffb400;
}

.image-content p{
    max-width:280px;
    font-size:15px;
    line-height:1.8;
    opacity:.9;
}

/* Right Side */
.popup-form{
    width:55%;
    padding:45px;
}

.popup-form h2{
    font-size:34px;
    color:#1d1d1d;
    margin-bottom:10px;
}

.popup-form p{
    color:#777;
    margin-bottom:30px;
    line-height:1.7;
}

/* Inputs */
.input-box{
    position:relative;
    margin-bottom:18px;
}

.input-box i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#98a2b3;
}

.textarea i{
    top:24px;
    transform:none;
}

.input-box input,
.input-box textarea{
    width:100%;
    padding:15px 18px 15px 48px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.input-box textarea{
    height:130px;
    resize:none;
}

.input-box input:focus,
.input-box textarea:focus{
    border-color:#0b1f4d;
}

/* Button */
.submit-btn{
    width:100%;
    padding:16px;
    border:none;
    border-radius:10px;
    background:#081d45;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.submit-btn:hover{
    background:#12327b;
}

.submit-btn i{
    margin-right:10px;
}

/* Mobile */
@media(max-width:768px){

    .popup{
        padding:15px;
    }

    .popup-box{
        flex-direction:column;
        width:100%;
        max-width:420px;
        max-height:90vh;
        overflow-y:auto;
    }

    .popup-image,
    .popup-form{
        width:100%;
    }

    .popup-image{
        height:260px;
    }

    .image-content{
        left:25px;
        bottom:30px;
    }

    .image-content h2{
        font-size:28px;
    }

    .popup-form{
        padding:30px 25px;
    }

    .popup-form h2{
        font-size:28px;
    }

    .close-btn{
        top:-15px;
        right:-15px;
        width:42px;
        height:42px;
        z-index: 9;
        font-size:24px;
    }
}

Conclusion

Building a Responsive Contact Form Popup using HTML, CSS, and JavaScript is a great way to improve user interaction and make it easier for visitors to get in touch. In this tutorial, you learned how to create a modern, responsive popup with a clean two-column layout, smooth styling, and simple JavaScript functionality for opening and closing the modal. You can customize the colors, images, animations, and form fields to match your website’s design. This responsive contact form popup is perfect for business websites, portfolios, agencies, landing pages, and personal projects, giving your site a professional and engaging user experience.