Code tạo popup gửi form thành công cho Contact Form 7

Contact Form 7 là một trong những plugin phổ biến nhất để tạo biểu mẫu trên WordPress. Mặc dù đã tích hợp sẵn tính năng hiển thị thông báo sau khi gửi form, bạn có thể tùy chỉnh thông báo này bằng một popup đẹp mắt sử dụng SweetAlert2. Trong bài viết này, ShoppingWeb sẽ chia sẻ đến bạn đoạn code tạo popup gửi form thành công cho Contact Form 7

Code tạo popup gửi form thành công cho Contact Form 7

Kết quả sau khi áp dụng đoạn code bên dưới:

<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>

Các bạn copy đoạn code dưới đây và chèn vào Footer của Website nhé. đối với theme Flatsome thì các bạn làm theo hướng dẫn sau: Flatsome => Advanced => Global Settings => Dán code vào phần Footer Scripts

SweetAlert2 là gì?

SweetAlert2 là một thư viện JavaScript giúp hiển thị popup thông báo đẹp mắt, hiện đại và dễ sử dụng. Thay vì thông báo mặc định đơn giản của Contact Form 7, bạn có thể sử dụng SweetAlert2 để mang lại trải nghiệm người dùng tốt hơn.

Lợi ích khi sử dụng Popup SweetAlert2

Giao diện hiện đại: Popup trông chuyên nghiệp hơn thông báo mặc định.
Tương tác tốt hơn: Người dùng dễ dàng nhận biết kết quả sau khi gửi form.
Tùy chỉnh linh hoạt: Phù hợp với phong cách thiết kế website.

Các bước cài đặt và tích hợp Popup cảm ơn

Bước 1: Thêm Liên Kết SweetAlert2 Vào Website

Bạn cần thêm thư viện SweetAlert2 vào website của mình. Mở file header.php hoặc sử dụng plugin quản lý đoạn mã như Code Snippets để thêm mã sau:

<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">

Bước 2: Thêm Script Xử Lý Sự Kiện Gửi Form Thành Công

Thêm đoạn mã JavaScript để lắng nghe sự kiện khi form được gửi thành công. Thêm mã sau vào file footer.php hoặc sử dụng plugin tương tự:

<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>

Bước 3: Ẩn Thông Báo Mặc Định Của Contact Form 7

Contact Form 7 hiển thị thông báo mặc định bên dưới form. Để tránh thông báo này xuất hiện đồng thời với popup, bạn cần thêm CSS sau vào style.css:

.wpcf7 form.sent .wpcf7-response-output {
display: none;
}

Mẹo tùy biến popup

Bạn có thể tùy chỉnh thêm popup để phù hợp với phong cách website:

Đổi biểu tượng (icon): Sử dụng error, warning, hoặc info thay cho success.
Thay đổi màu sắc: Sử dụng các lớp CSS tùy chỉnh hoặc cấu hình thêm trong SweetAlert2.
Nút hành động: Thêm chức năng khi nhấn nút OK như chuyển hướng sang trang khác. Ví dụ:

Swal.fire({
title: 'Xin cảm ơn!',
text: 'Form đã được gửi thành công.',
icon: 'success',
confirmButtonText: 'OK'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = '/trang-cam-on';
}
});

Việc tích hợp SweetAlert2 để hiển thị popup cảm ơn khi gửi form thành công giúp nâng cao trải nghiệm người dùng trên website của bạn. Chỉ cần vài bước đơn giản, bạn đã có thể thay thế thông báo mặc định bằng một popup đẹp mắt và chuyên nghiệp.

Bài viết liên quan:

Hướng Dẫn Tạo Nút “Gọi Lại Cho Tôi” Với Contact Form 7 Trên Theme Flatsome

Code chống SPAM cho Contact Form 7

Code tạo popup gửi form thành công cho Contact Form 7