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

Оформить доступ с промокодом
100
#2470a1
с вылетом из Москвы
Специальное предложение на горнолыжный курорт
от 599990 рублей
8 (900) 250-90-00
Заказать обратный звонок

Супер цена на горнолыжный курорт в Швейцарии на 20 дней

Гарантия комфортного тура
Достоверная и актуальная информация
Получите спецпредложение
Выберите дату
Введите телефон
Нажимая кнопку «Получить спецпредложение», Вы соглашаетесь на обработку персональных данных

Как добавить вертикальную форму в BF204N в ZeroBlock для Tilda

Добавим форму заявки в ZeroBlock, выделим заголовок цветом и добавим 2-а эффекта к кнопке формы.
Порядок выполнения
1. Создаём ZeroBlock. Настраиваем визуальную часть. Адаптируем.
2. Создаём в Zero элемент HTML и размещаем в предполагаемом месте формы.
3. Очищаем этот элемент и добавляем в него блок
<div class= "zeroformvert"></div>. Всё сохраняем

4. Добавляем форму BF204N (Настройки на примере:
- 2 поля ввода
- ширина 3 колонки - без отступа
- отступ сверху и снизу 0

5. Добавляем код 1. Изменяем:
#rec45924094 - это ID ZeroBlock
#rec45924165 - это ID блока с формой

6. Добавляем эффект бликов для кнопки код 2
7. Добавляем эффект вспышки при наведении для кнопки код 3
8. Добавляем код выделения заголовка в Zero H2 (можете поменять на H1)

9. Адаптируем ZeroBlock с формой. Всё.

Скрипт вставляется в блок ДРУГОЕ►Т123
1

<script type="text/javascript">
$(document).ready(function(){
//Добавляем класс к ZeroBlock 
$("#rec45924094").addClass("zerosformoy"); 
//Добавляем класс к форме
$("#rec45924165").addClass("formavzero");    
  
//клонируем нашу форму в ZeroBlock
$(".formavzero").appendTo(".zeroformvert");

//Скрывает табличку с ошибкой заполнения
$(".formavzero .t-form__errorbox-bottom").hide();
$(".formavzero .t-form__errorbox-middle").hide();
//Скрывает надписи об ошибке заполнения
$(".formavzero .t-input-error").hide();
});
</script>

<style type="text/css">
/*Задаём цвет и отступы таблички об успешной отправке данных */    
   .formavzero .t-form__successbox{
        background:#4bbf15 !important;
        padding: 5px;
        margin-bottom: 5px;
    }    
/*Высота полей ввода */    
    .formavzero input{
    height: 40px !important;
    }
/*Отступ между полями */     
    .formavzero .t-input-group{
    margin-bottom: 10px !important;
    }
/*Задаём высоту и плавный переход для кнопки в Zero */
    .formavzero .t-submit{
    height: 40px !important;
    width: 100%;
    }  
/*Задаём отступ текста под формой */
    .formavzero .t-form__bottom-text{
    margin-top: 10px !important;
    font-size: 10px !important;
    }      
     /*Размер шрифта политики*/
    .formavzero .t678__form-bottom-text{
    font-size: 10px !important;
    margin-top: 10px !important;
    }      
    /*Размер шрифта подписи полей ввода*/
    .formavzero .t-input-subtitle{
        color:#ffffff;
        opacity: 0.90 !important;
        font-size:14px !important;
    }
    /*Ширина выбора полей ввода Дата и Время*/
    .t678 .t-inputtime, .t678 .t-datepicker__wrapper {
        max-width: none !important;
}
    
</style>
2

<style>
 .t-submit:hover{
    box-shadow: none;
    -webkit-animation: si-button-pulse 0.8s 0s ease-out 1;
    -moz-animation: si-button-pulse 0.8s 0s ease-out 1;
    animation: si-button-pulse 0.8s 0s ease-out 1;
    overflow: hidden;
}
@keyframes si-button-pulse {
    from {box-shadow: 0 0 8px 6px #43a713, 0 0 12px 14px #43a713;}

    to {box-shadow: 0 0 18px 6px rgba(255, 48, 26, 0), 0 0 4px 40px rgba(255, 48, 26, 0);}
}
</style>
3

<script>
        $('.t-submit').append('<div class="ink animate" style="height: 200px;width: 250px;top: -20px;left: -140px;"></div>');
</script>

<style>
     .t-submit{
        position: relative;
        overflow: hidden;
    }
    .ink{
       display: block;
       position: absolute;
       background: rgba(255, 255, 255, 1.0);
       border-radius: 100%;
       -webkit-transform: scale(0);
       -moz-transform: scale(0);
       -o-transform: scale(0);
       transform: scale(0);
       z-index: 20;  
    }
    
    .animate {
    webkit-animation: ripple 3s linear infinite;
    -moz-animation: ripple 3s linear infinite;
    -ms-animation: ripple 3s linear infinite;
    -o-animation: ripple 3s linear infinite;
    animation: ripple 3s linear infinite;
     }
   @keyframes ripple {  
    20% {     
        opacity: 0;     
        transform: scale(2.7);
        }
    100% {     
        opacity: 0;     
        transform: scale(2.7);
        }
   }    
</style>
4

<style type="text/css">
h2{
      /*Задаёт цвет и прозрачность*/
      background-color: rgba(0, 0, 0, 0.45);
      /*Если убрать строчку ниже, то окраситься не построчно, а целиком*/
      display: inline !important;
  }
</style>
Made on
Tilda