Code thông báo gửi form thành công cho Plugin contact form 7 đẹp hơn

Thông báo: Nội dung trên trang web này là những kiến thức mà mình đã sưu tầm từ nhiều nguồn trên mạng, cũng như những gì mình học hỏi và tích lũy được. Nếu bất kỳ bài viết nào trên trang vô tình vi phạm bản quyền của tác giả, xin vui lòng thông báo cho mình để mình có thể gỡ bỏ ngay lập tức. Rất mong nhận được sự thông cảm và hỗ trợ từ mọi người. Xin cảm ơn!

So sánh thông báo thành công mặc định và thông báo thành công popup tùy chỉnh

Code hiển thị thông báo cho contact form 7 bằng popup

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.12.2/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.12.2/dist/sweetalert2.min.css">
<script>
document.addEventListener('wpcf7mailsent', function(event) {
    Swal.fire({
        title: 'Xin cảm ơn!',
        text: 'Form đã được gửi thành công.',
        icon: 'success',
        confirmButtonText: 'OK'
    });
}, false);
</script>
<style>
.wpcf7 form.sent .wpcf7-response-output {
    display: none;
}
</style>

document.addEventListener('wpcf7mailsent', function(event) {

Swal.fire({

title: 'Xin cảm ơn!',

text: 'Form đã được gửi thành công.',

icon: 'success',

confirmButtonText: 'OK'

});

}, false);

</script>

<style>

.wpcf7 form.sent .wpcf7-response-output {

display: none;

}

</style>

Các bạn chèn code trên vào thẻ head, footer, body thì nó sẽ chạy nhé, xem hình bên dưới nếu là theme bạn là Flatsome, còn các theme khác thì chèn vào các thẻ như mình nói là được

Code trên đã bao gồm code css để ẩn thông báo mặc định của Contact form 7 và js để hiển thị thông báo popup luôn rồi nhé! bạn chỉ cần copy dán là xong