Как предотвратить множественную отправку в Contact Form 7


Недавно мы столкнулись с проблемой, когда мы использовали настройку Mail (2) для отправки автоматического электронного письма пользователю, который отправляет форму с вложением. Проблема заключалась в том, что это вложение было файлом размером 2 МБ, поэтому, прежде чем вы увидите сообщение об успешном завершении, вам нужно дождаться отправки вложения, что может занять некоторое время. Из-за этого пользователи в конечном итоге отправляют формы несколько раз, что приводит к многократной отправке и отправке электронных писем обеим сторонам (особенно при использовании стороннего SMTP-хоста, такого как SendGrid или MailGun).

Вот метод, который мы использовали для предотвращения такого рода действий, которые можно просто добавить в ваш файл functions.php для вызова на каждой странице.

<?php
	// Prevent Multi Submit on all WPCF7 forms
	add_action( 'wp_footer', 'prevent_cf7_multiple_emails' );

	function prevent_cf7_multiple_emails() {
	?>

	<script type="text/javascript">
	var disableSubmit = false;
	jQuery('input.wpcf7-submit[type="submit"]').click(function() {
	    jQuery(':input[type="submit"]').attr('value',"Sending...");
	    if (disableSubmit == true) {
	        return false;
	    }
	    disableSubmit = true;
	    return true;
	})
	  
	var wpcf7Elm = document.querySelector( '.wpcf7' );
	wpcf7Elm.addEventListener( 'wpcf7_before_send_mail', function( event ) {
	    jQuery(':input[type="submit"]').attr('value',"Sent");
	    disableSubmit = false;
	}, false );

	wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
	    jQuery(':input[type="submit"]').attr('value',"Submit")
	    disableSubmit = false;
	}, false );
	</script>
	<?php
} ?>

Приведенное выше изменит текст кнопки отправки форм на «Отправка…» и отключит любые дальнейшие щелчки, пока сообщение не будет доставлено. Как только сообщение будет доставлено, кнопка отправки изменится на «Отправлено».

ПОЛЕЗНО  Replace word's in translation

В дополнение к этому, если в форме есть какие-либо ошибки, мы можем использовать событие DOM wpcf7invalid, которое мы можем использовать для изменения значения кнопки отправки обратно на исходное значение; в нашем случае мы снова изменили его на «Отправить».

В нашем случае у нас были страницы с несколькими формами, и нужно было только добавить их в одну из форм на веб-сайте. Для этого вы можете просмотреть источник страницы и получить атрибут ID для формы (например, #wpcf7-f4-o1) и просто добавить его перед каждым из селекторов, например: jQuery ('#wpcf7-f4-o1: input [type="submit"]')


Есть и другие способы сделать это, например, использовать предварительный загрузчик при отправке, но наш конкретный клиент был очень доволен решением, которое мы ему предоставили.

ПОЛЕЗНО  Captcha for Simple Job Board

Не стесняйтесь оставлять комментарий ниже, если это помогло или у вас есть другой предпочтительный метод выполнения такой задачи.