Thêm nút liên hệ click hiện lên form báo giá dạng popup

Vừa rồi team Vũ Trụ Số vừa hỗ trợ miễn phí cho 1 khách hàng về chức năng hiển thị 1 button có ảnh liên hệ, click vào ảnh/button thì sẽ hiện lên 1 form để khách hàng điền vào các thông tin và gửi đi nên tiện thể share cho những ai đang gặp khó khăn về thao tác thực hiện.

Hiện tại AI sẽ hỗ trợ bạn nhanh chóng nhưng nếu bạn làm theo vẫn chưa được thì có thể áp dụng vài đoạn code sau là sẽ giải quyết được vấn đề.

1. Tạo sẵn 1 form để nhận thông tin của khách hàng bằng plugin Contact form 7, sau đó bạn sẽ có shortcode để dán vào code phía dưới

2. Dán code phía dưới vào phần footer.php, dán vào code snippet plugin hoặc nếu bạn dùng theme phổ biến là Flatsome thì dán code vào Flatsome > Advanced > Footer Scripts

<!-- POPUP FORM -->
<div class="btn-vutruso" style="display:none;">
	<div class="vutruso-form-modal">

		<button class="vutruso-form-close" aria-label="Đóng">&times;</button>

		<h2 class="vutruso-modal-title">LIÊN HỆ TƯ VẤN BÁO GIÁ NGAY</h2>
		<p class="vutruso-modal-subtitle">
			Vui lòng để lại thông tin, chúng tôi sẽ gọi lại tư vấn &amp; báo giá ngay.
		</p>

		<div class="vutruso-modal-form">
			<!-- THAY ID form của bạn vào đây -->
			[contact-form-7 id="d8868fb" title="Form báo giá"]
		</div>

	</div>
</div>

<div class="vutruso-btn-close">
	<div class="box-item item-contact">
		<div class="svgico">
			<img alt="" width="80" height="80" src="https://vutruso.com/wp-content/uploads/2025/11/calling-120-s.png">
			<span class="svgico--close">
			<img alt="" width="80" height="80" src="https://vutruso.com/wp-content/uploads/2025/11/calling-120-s.png">
			</span>
		</div>
	</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var iconContact = document.querySelector('.vutruso-btn-close .item-contact');
    var popup = document.querySelector('.btn-vutruso');
    var closeBtn = document.querySelector('.vutruso-form-close');

    // MỞ POPUP
    iconContact.addEventListener('click', function(e) {
        popup.style.display = 'flex';
        popup.classList.add('active');
        document.body.style.overflow = 'hidden';
    });

    // ĐÓNG POPUP
    closeBtn.addEventListener('click', function() {
        popup.classList.remove('active');
        popup.style.display = 'none';
        document.body.style.overflow = '';
    });

    // Click ra ngoài để đóng
    popup.addEventListener('click', function(e) {
        if (e.target === popup) {
            popup.classList.remove('active');
            popup.style.display = 'none';
            document.body.style.overflow = '';
        }
    });

    // ESC để đóng popup
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && popup.classList.contains('active')) {
            popup.classList.remove('active');
            popup.style.display = 'none';
            document.body.style.overflow = '';
        }
    });

    // Redirect CF7 sau khi gửi form (nếu cần)
    // document.addEventListener('wpcf7mailsent', function () {
        //window.location.href = '/cam-on/';
    // });
});
</script>

<style>
/* OVERLAY POPUP - Căn giữa màn hình */
.btn-vutruso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.btn-vutruso.active {
    opacity: 1;
    visibility: visible;
}

/* MODAL BOX */
.vutruso-form-modal {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8) translateY(-20px);
    transition: transform 0.3s ease;
}

.btn-vutruso.active .vutruso-form-modal {
    transform: scale(1) translateY(0);
}

/* NÚT ĐÓNG */
.vutruso-form-close {
    position: absolute;
    top: -10px;
    right: -14px;
    width: 40px;
    height: 43px;
    line-height: 50px !important;
    border: none;
    background: #f0f0f0;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    margin: 0;
    min-height: unset;
}

.vutruso-form-close:hover {
    background: #e0e0e0;
    color: #333;
}

/* TITLE & SUBTITLE */
.vutruso-modal-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: #194fdb;
    text-align: center;
}

.vutruso-modal-subtitle {
    margin: 0 0 25px;
    font-size: 18px;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

/* FORM CONTAINER */
.vutruso-modal-form {
    width: 100%;
}

/* NÚT LIÊN HỆ GÓC TRÁI */
.vutruso-btn-close {
    position: fixed;
    bottom: 100px;
    left: 20px;
    margin: 0;
    z-index: 990;
    cursor: pointer;
}

.vutruso-btn-close .svgico img {
    width: 60px;
    height: 60px;
}

.vutruso-btn-close .svgico .svgico--close img {
    width: 19px;
    height: 19px;
}

.vutruso-btn-close .svgico .svgico--close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.btn-vutruso.active ~ .vutruso-btn-close .svgico .svgico--close {
    opacity: 1;
    visibility: visible;
}

.btn-vutruso.active ~ .vutruso-btn-close .svgico > img {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.3);
}

.vutruso-btn-close .box-item {
    position: relative;
}

.vutruso-btn-close .box-item .svgico {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4;
    height: 90px;
    width: 90px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ffffff;
    cursor: pointer;
    background: #FFD700;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    animation: pulse 2s infinite;
}

.vutruso-btn-close .box-item:before,
.vutruso-btn-close .box-item:after {
    position: absolute;
    content: '';
    height: 90px;
    width: 90px;
    left: 0;
    top: 0;
    background: #194fdb;
    border-radius: 50%;
}

.vutruso-btn-close .box-item:before {
    animation: euiBeaconPulseSmall 2s infinite ease-out;
}

.vutruso-btn-close .box-item:after {
    animation: euiBeaconPulseSmall 2s infinite ease-out 0.4s;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .vutruso-form-modal {
        padding: 30px 20px;
        max-width: 90%;
    }
    
    .vutruso-modal-title {
        font-size: 18px;
    }
    
    .vutruso-modal-subtitle {
        font-size: 13px;
    }
}

@keyframes euiBeaconPulseSmall { 0% { transform: scale(0); opacity: 1; } 50% { opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
</style>

Nhớ thay [contact-form-7 id="d8868fb" title="Form báo giá"] thành shortcode contact form của bạn nhé.

Sửa LIÊN HỆ TƯ VẤN BÁO GIÁ NGAY và Vui lòng để lại thông tin, chúng tôi sẽ gọi lại tư vấn & báo giá ngay. lại thành chữ bạn muốn.

Thay cả ảnh liên hệ lại để phù hợp với website của bạn lưu nhé.

Ưu điểm của code này là hoạt động trên mọi theme WordPress, dùng Vanilla JS nên sẽ không cần jquery.

Tận hưởng thôi, nếu cần hỗ trợ gì thêm hoặc yêu cầu share code khác vui lòng liên hệ với chúng tôi để được hỗ trợ.

Xin cảm ơn.