Ẩn Contact Form 7 khi gửi thành công (hiển thị thông báo thành công)

Đây lại là 1 mẹo nhỏ liên quan đến plugin Contact Form 7, với hướng dẫn nhanh dưới đây khi người dùng click vào button gửi thông tin liên hệ … thì form sẽ được ẩn đi, tất nhiên trường hợp nhập thiếu thông tin hoặc gặp vấn đề gì đó thì form vẫn hiển thị thông báo như bình thường.

Bạn có thể thêm 1 đoạn js nhỏ dưới đây để ẩn Contact Form 7 khi form đã được gửi đi thành công (chỉ hiển thị thông báo thành công và ẩn form nhập thông tin)

<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    document.querySelectorAll("form.wpcf7-form > :not(.wpcf7-response-output)").forEach(el => {
      el.style.display = 'none';
    });
  }, false );
</script>

<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    document.querySelectorAll("form.wpcf7-form > :not(.wpcf7-response-output)").forEach(el => {
      el.style.display = 'none';
    });
  }, false );
</script>

Đây là đoạn code trên bạn có thể thêm vào dưới phần form ngay trong phần setting form contact form 7 luôn nhé hoặc thêm vào footer của website đều được nhé.

Nội dung được tham khảo từ Vũ trụ số

Nếu bạn gặp khó khăn trong chỉnh sửa hoặc muốn phát triển tính năng riêng cho website thì có thể tham khảo dịch vụ bảo trì - phát triển tính năng website wordpress tại TNDigi nhé!

Mình tự học - tìm hiểu - nghiên cứu và làm việc với WordPress được khoảng thời gian nhất định nên lên serial chia sẻ những gì mà mình từng gặp qua. Sẽ có nhiều thiếu sót nên nếu như có chổ nào chưa đúng hay chưa hoạt động được bạn contact với mình để hoàn thiện hơn.

Ghi chú quan trọng:
Cách tuỳ biến không cần can thiệp vào CODE mà sử dụng hook (nếu chưa có trong hướng dẫn) sẽ được mình sớm cập nhật!

Kênh Zalo hỗ trợ miễn phí. Chúc bạn áp dụng thành công!