Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как показать своё сообщение успешной отправке из ZeroBlock Тильда
You Really Decide to Improve Yourself
Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale.
SCHEDULE APPOINTMENT

Как показать своё сообщение успешной отправке из ZeroBlock Тильда

1
Создали ZeroBlock с сообщением, расположили элементы по центру
2
Кнопкам в этом Zero задали класс success-btn-close
3
Создали ZeroBlock c основной формой и задали ей класс zero_form
4
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём своё сообщение об успешной отправке формы, оформляем его из ZeroBlock
Фрагмент видео
Библиотека для примера стандартный блок

<script>
document.addEventListener("DOMContentLoaded", function() {

(function () { 
    
const btnLabel = '.success-btn-close';    
const formLabel = '.zero_form';
const successLabel = 'success-zero';
    
const closeBtn = document.querySelector(btnLabel);
const form = document.querySelector(formLabel);

const successZero = closeBtn.closest('.t-rec');
successZero.classList.add(successLabel, 'hide-success', 'position-success');

document.addEventListener('click', function(event) { 
    if(event.target.closest(formLabel+' .t-submit')){
        setTimeout(function(){
            if (  form.querySelector('.t-form').classList.contains("js-send-form-success")  ){
                successZero.classList.remove('hide-success');
                document.querySelector('.t-form-success-popup').appendChild(successZero);
            };
        }, 1000);

    };
    
    if(event.target.closest(btnLabel)){
        window.tildaForm.closeSuccessPopup();
    };
});

 
})();

});
</script>


<style>
.t-form-success-popup__window , 
.hide-success { 
    opacity: 0!important;
    height: 0!important;
    max-height: 0!important;
    min-height: 0!important;
    pointer-events: none!important;
    overflow: hidden!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.position-success {
    position: inherit;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
</style>
Learn more about the PM course.
Just type your contacts.
Х
Tilda Newsletter
Subscribe to our email newsletter for useful tips and valuable resources, sent out every month
Made on
Tilda