Как предотвратить множественную отправку в 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
} ?>

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

ПОЛЕЗНО  Полезные функции

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

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


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

ПОЛЕЗНО  How to Completely Remove Comments From a WordPress Site

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