[WordPress] Làm sao để chặn nhấn submit nhiều lần trên Contact form 7

Website của bạn đang dùng Contact form 7?
Bạn cảm thấy phiền phức khi nhận được những dữ liệu trùng lặp gửi về email chỉ vì người dùng vô tình hoặc cố ý nhấn submit nhiều lần?
Sau đây là giải pháp để khắc phục vấn đề đó.

Trường hợp form gửi dữ liệu lên bằng AJAX

Để tránh người dùng ấn submit nhiều lần ta chỉ cần thêm đoạn code sau vào file footer.php.

	
		$(document).on('click', '.wpcf7-submit', function(e){
		    if( $('.ajax-loader').hasClass('is-active') ) {
		        e.preventDefault();
		        return false;
		    }
		});
	

.wpcf7-submit chính là tên class mặc định của nút submit khi dùng Contact form 7

Trường hợp form gửi dữ liệu bằng phương thức POST

Đối với trường hợp này, ta cần thêm một nút button phụ có định dạng tương tự như nút submit. Tuy nhiên trong contact form 7 không có type button nên ta sẽ xử lý như sau

– Ở phần cấu hình contact form ta thêm hai nút submit có dạng:
[submit id:model-submit01 “送信”]
[submit id:model-submit02 “送信”]

– Thêm css để ẩn đi bớt 1 nút, ở đây tôi ẩn nút #model-submit01: #model-submit01{display: none};

– Cuối cùng thêm đoạn js sau vào file footer.php.

	
		jQuery( window ).load(function() {

			jQuery('#model-submit01').attr('type', 'button');
			jQuery(document).on('click', '#model-submit02', function(e){
				jQuery(this).css('display', 'none');
				jQuery('#model-submit01').css('display', 'block');
				setTimeout(() => {
					jQuery(this).css('display', 'block');
					jQuery('#model-submit01').css('display', 'none');
				}, 10000);
			});
			
		});
	

Trên đây là 2 cách để xử lý chặn nhấn submit nhiều lần khi dùng Contact form 7, chúc các bạn áp dụng thành công.
<Happy coding>