Website WordPress của bạn đang sử dụng plugin Contact Form 7? Và ban đang cảm thấy khó chịu vì phải nhận nhiều form giống nhau vì người dùng vô tình hoặc cố tình gửi nhiều lần? Đừng lo lắng, bài viết hôm nay sẽ giúp bạn giải quyết vấn đề này.
Ẩn nút submit khi click gửi form lần đầu tiên
Để có thể ẩn được nút submit, các bạn thêm đoạn code này vào file function
function js_hide_cf7_pttuan410(){;?>
<script>
jQuery(document).ready(function($){
$('.wpcf7-submit').click(function (){
$(this).hide();
});
});
</script>
<?php }
add_action('wp_footer','js_hide_cf7_pttuan410');Như vậy khi click xong là nút submit của CF7 sẽ tự động biến mất.
Sau khi nhấn gửi nút submit sẽ biến mất.
Nếu làm theo cách này thì thấy không ổn lắm, trong trường hợp gửi sai thì nút submit này cũng không hiện lên lại, vậy thì chúng ta phải viết thêm 1 đoạn script nữa để nút submit hiển thị lại khi gửi thành công hay thất bại nhé.
Đoạn code sẽ như sau:
function js_hide_cf7_pttuan410(){;?>
<script>
jQuery(document).ready(function($){
$('.wpcf7-submit').click(function (){
$(this).hide();
});
document.addEventListener( 'wpcf7submit', function( event ) {
jQuery('.wpcf7-submit').show();
}, false );
});
</script>
<?php }
add_action('wp_footer','js_hide_cf7_pttuan410');Như vậy là xong, các bạn có thể kiểm tra kết quả của mình nhé.
Hướng dẫn cách chống gửi nhiều form cùng 1 lúc
Thêm thuộc tính disable vào button submit
Code này sẽ không ẩn button submit đi mà sẽ add thuộc tính disable vào button, từ đó sẽ không click được.
Đoạn code sẽ như sau:
function 2_js_hide_cf7_pttuan410(){;?>
<script>
jQuery(document).ready(function($){
$('.wpcf7-submit').click(function (){
$(this).attr('data-disabled',"disabled")
});
document.addEventListener( 'wpcf7submit', function( event ) {
jQuery('.wpcf7-submit').attr('data-disabled',"enabled")
}, false );
});
</script>
<?php }
add_action('wp_footer','2_js_hide_cf7_pttuan410');Chúc bạn chặn gửi Contact Form 7 nhiều lần 1 lúc thành công!
Đọc thêm: Top 8 theme WordPress tin tức đẹp đáng mua hiện nay
