/Событие после успешной отправки формы на Тильда

Событие после успешной отправки формы на Тильда

В процессе отправки формы иногда срабатывает защита от роботов и появляется капча, поэтому найдем за что можно зацепится при успешной отправке формы:


Изображение 1. Элемент становится видимым при успешной отправке формы.

Как можно увидеть на скриншоте, успешная отправка формы делает видимым DIV с сообщением для пользователя. На изменение стиля этого элемента подпишем нашу функцию:

/*Слушаем изменение событий всех элементов*/
var observer = new MutationObserver(function(mutations) {
	mutations.forEach( function(mutation) {
		if (mutation.attributeName !== 'style') return;
		var currentValue = mutation.target.style.display;
		if (currentValue !== previousValue) {
			if (previousValue === "none" && currentValue !== "none") {
				/*действия которые нужно выполнить если элемент стал видимый (форма успешно отправлена)*/
				console.log('Форма успешно отправлена!');
			}
			previousValue = mutation.target.style.display;
		}
	});
});

Подробно про MutationObserver можно прочитать по ссылке. На данный момент такой способ отслеживания изменений DOM-элементов поддерживают все современные бразуеры (см. изображение 2).


Изображение 2. Поддержка MutationObserver различными браузерами.

Далее необходимо подписать наш объект: DIV с сообщением об успешной отправке формы на MutationObserver:

$('#form634450533 button').click(function () {
	try {
		if ($('#form634450533 [name="email"]').val() === '' || $('#form634450533 [name="checkbox"]').is(':checked') === false || $('#form634450533 [name="checkbox2"]').is(':checked') === false) return;
		email = $('#form634450533 [name="email"]').val();
	} catch (e) {}
});

var target =  $('#form634450533 div.js-successbox')[0];
var email = '';
var previousValue = target.style.display;
observer.observe(target, {attributes: true});

Также есть небольшой нюанс, при отправке формы Тильда до капчи очищает значения INPUT-ов формы, поэтому нужно сохранить их сразу после того как пользователь нажал "отправить".

Полностью рабочий код, остается только заменить норме формы своим номером:

<script>
  $(document).ready(function() {
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach( function(mutation) {
            if (mutation.attributeName !== 'style') return;
            var currentValue = mutation.target.style.display;
            if (currentValue !== previousValue) {
               if (previousValue === "none" && currentValue !== "none") {
		  console.log('Форма успешно отправлена!');
               }
    
               previousValue = mutation.target.style.display;
            }
        });
      });
    
      $('#form634450533 button').click(function () {
        try {
          if ($('#form634450533 [name="email"]').val() === '' || $('#form634450533 [name="checkbox"]').is(':checked') === false || $('#form634450533 [name="checkbox2"]').is(':checked') === false) return;
          email = $('#form634450533 [name="email"]').val();
        } catch (e) {}
      });
    
      var target =  $('#form634450533 div.js-successbox')[0];
      var email = '';
      var previousValue = target.style.display;
      observer.observe(target, {
        attributes: true
      });
    })
</script>

и скопировать получившийся код в блок Т123 Тильды в самом верху страницы:


Изображение 3. Добавление кода отслеживания в блок Т123 Тильды.