Как показать своё сообщение успешной отправке из 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

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера стандартный блок

Форма в Zero как статичный блок

<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>

Форма в Zero как блок popUp

1. Делаем основную форму в popup через блок Т1093 (и активируем в нём опцию "Закрыть попап после открытия другого зеро-блока в попапе")
2. Задаём форме класс zero_form
3. Zero успеха делаем как popup через блок Т1093 и задаём ему ссылку вызова #zero-success.

Код ставим в конец страницы в блок Т123

<script>
const formElemClass = '.zero_form';
const successLink = '#zero-success';

const formElem = document.querySelector(formElemClass);
const successPopup = document.querySelector(`[data-tooltip-hook="${successLink}"]`);
        
if(formElem&&successPopup){
   function t396_onSuccess(form) {
        if (!form) return;
        if (form instanceof jQuery) {
          form = form.get(0);
        };
                    
        if(form.closest(formElemClass)){
            t1093__showCurrentPopup(successPopup);
        };
    };
};
</script>

<style>
.zero_form .js-send-form-success{
    display:none;    
}
</style>

Learn more about the PM course.
Just type your contacts.

Get your free lesson

Try your skills

Х