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

Оформить доступ с промокодом
100
Ведущая консалтинговая компания в сфере залогового кредитования в Москве и Московской области
ПОЛУЧИТЕ КРЕДИТ ПОД ЗАЛОГ НЕДВИЖИМОСТИ
уже сегодня по ставке от 9,9% годовых
Без справок о доходах
Любая кредитная история
Расходы за наш счёт
Работаем без предоплаты
Ежемесячный платёж
0 руб.
Сумма кредита, руб
0
15000000
Срок кредита, лет
1
25
Давайте рассмотрим конкретно Вашу ситуацию


© All Right Reserved. Tilda Publishing Inc.

Делаем калькулятор в ZeroBlock в Tilda

Как выполнили данный пример:

1. Создали ZeroBlock
2. Добавили в него элемент HTML с блоком
<div class = "mycalc"></div>
3. Создали форму BF204N
4. Добавили скрипт на страницу в блок Другое►Т123
#rec51509436 - ID формы с калькулятором
#popup:mycalc - ссылка кнопки для вызова popUp окна
5. Адаптировали

<style>
/*Скрываем кнопку Submit*/    
    .t678 .t-form__submit{
        display:none !important;
    }
/*Привязка элементов формы по левому краю*/      
  .t678  .t-input-group {
        float:left;
        width: 250px;
        
    }
/*Блок с ползунками по левому краю*/    
    .polzblk {
       float: left;
}
/*Отменяем привязку у втророго ползунка*/  
   .t678 .t-input-group_rg:last-child{
       clear:both;
   }
/*Отступ между ползунками*/
   .t678 .t-input-group_rg{
         margin-bottom: 0px !important;
   }
/*Цвет текста поля итого*/   
   .t-calc__wrapper{
     color: #FFF700 !important;    
  }
/*Расположение и отступы текста в поле итого*/
 .t-input-group_fr {
    text-align: center;
    margin-top: 70px;
    margin-right: 50px;
}
/*Размер шрифта в поле итого*/
.t-name_md {
    font-size: 30px !important;  
}
/*Эффект для кнопки*/
.calcbutton {
    background-image: linear-gradient(45deg, #f9da00 0%, #ff7300 40%, #f5ff01 100%);
    box-shadow: 0 16px 32px 0 rgba(255, 141, 0, 0.35);
    background-position: 100% 0 !important;
    background-size: 200% 200%;
    transition: all 0.5s ease-in-out !important;
}
/*Эффект для кнопки*/
.calcbutton:hover {
   box-shadow: 0 0 0 0 rgba(0,40,120,0);
   background-position: 0 0 !important;
}
/*При размере экрана меньше 960px*/
@media screen and (max-width: 960px){
/*Уменьшаем отступ сверху у поля Итого*/
.t-input-group_fr {
    margin-top: 40px;
}
}
/*При размере экрана меньше 660px*/
@media screen and (max-width: 660px){
/*Отменяем у формы привязки слева*/
.t-input-group , .polzblk {
    float:none;
}
}

</style>

<script>
//Оборачиваем поззунки в новый блок    
 $(".t-input-group_rg").wrapAll("<div class='polzblk'</div>");
//Перемещаем форму в Zero 
 $("#rec51509436").appendTo(".mycalc");
//Добавляем класс к кнопке 
 $("[href ='#popup:mycalc']").addClass("calcbutton");
</script>
Made on
Tilda