Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Стоимость уборки:
Шаг 9: Ваши контактные данные
* Данный расчет является предварительным, детальную стоимость уточняйте у менеджеров компании

Как сделать сложный калькулятор в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него 10 элементов Form
3
Формы под шагами с 1 по 8 содержут 2 поля ( основное и поле-калькулятор)
Шаг1 -Question with image answers|One - (variable name = "typeplace")
Calculations field - arithmetic expression (typeplace) - name(typeplace_calc)
Шаг2 - Question with image answers|Multi - (variable name = "typeclean")
Calculations field - arithmetic expression (typeclean) - name(typeclean_calc)
Шаг3 - Range Slider - (variable name = "ploshad")
Calculations field - arithmetic expression (ploshad) - name(ploshad_calc)
Шаг4 - Question with answers|Multi - (variable name = "dopuslugifirst")
Calculations field - arithmetic expression (dopuslugifirst) - name(dopuslugifirst_calc)
Шаг4* - Question with answers|One- (variable name = "dopuslugisecond")
Calculations field - arithmetic expression (dopuslugisecond) - name(dopuslugisecond_calc)
Шаг5 - Dropdown - (variable name = "animals")
Calculations field - arithmetic expression (animals) - name(animals_calc)
Шаг6 - Quantity - (variable name = "sanuz")
Calculations field - arithmetic expression (sanuz) - name(sanuz_calc)
Шаг7 - One line input - (variable name = "carpet")
Calculations field - arithmetic expression (carpet) - name(carpet_calc)
Шаг8 - Question with answers|Multi - (variable name = "night")
Calculations field - arithmetic expression (night) - name(night_calc)
4
Формулу для калькулятора использовали такую:
tp+ty+(pl*20)+d1+d2+an+su*1500+cp*30+ni
5
За основную форму приняли форму с полями ввода данных Шаг9.
В этой форме создали скрытые поля для получения данных из других форм.
Задали имена этим полям
sendtypeplace //Тип помещения
sendtypeclean //Тип уборки
sendploshad //Площадь уборки
senddop1 //ДопУслуги первый список
senddop2 //ДопУслуги второй список
sendanimals //Животные
sendsanuz //Сан/Узел
sendcarpet //Ковры
sendnight //Ночной режим
senditogo //Итоговая цена
6
Для кнопки задали ссылку #sendmyform
7
Для вывода итоговой суммы создали элемент Text со ссылкой #finsumm
8
Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
В коде заменили [data-elem-id="1562169314349"] - от основной формы

<style>
    .t-bgimg.t-img-select__indicator {
    box-shadow: none !important;
}
    .t-img-select__text.t-text.t-text_xs {
    font-size: 12px !important;
    text-align: center;
}

.tn-atom .t-form__errorbox-wrapper, .tn-form__errorbox-popup {
    bottom: 50%;
    left: calc(50% - 373px/2);
    right: inherit;
}
.t-img-select__control {
    width: calc(25% - 10px) !important;
 
}
</style>

<style>
    .t-input-group.t-input-group_fr {
    display:none;
}
</style>

<script>
$( document ).ready(function() {
//КАЛЬКУЛЯТОР
let calcID = "#rec243831068";
var $summelem= $('a[href="#finsumm"]');
//Производим вычисления    
   function createsumm(){
    setTimeout(function(){
      let tp =  Number($('input[name="typeplace_calc"]').val());//Значение Шага1
      let ty =  Number($('input[name="typeclean_calc"]').val());//Значение Шага2
      let pl =  Number($('input[name="ploshad_calc"]').val());//Значение Шага3
      let d1 =  Number($('input[name="dopuslugifirst_calc"]').val());//Значение Шага4
      let d2 =  Number($('input[name="dopuslugisecond_calc"]').val());//Значение Шага4*
      let an =  Number($('input[name="animals_calc"]').val());//Значение Шага5
      let su =  Number($('input[name="sanuz_calc"]').val());//Значение Шага6
      let cp =  Number($('input[name="carpet_calc"]').val());//Значение Шага7
      let ni =  Number($('input[name="night_calc"]').val());//Значение Шага8
      //Формула расчёта
      let finsumm = tp+ty+(pl*20)+d1+d2+an+su*1500+cp*30+ni;
      $summelem.html(finsumm+' руб*');
    }, 100);      
   };
    $(".tn-atom__form").on('DOMSubtreeModified', ".t-calc", function() {createsumm()}); 
//Ограничение ввода в поле
$(document).on('change keyup input click','input[name="carpet"] , input[name="sanuz"]',function(e){
if (this.value.match(/[^0-9]/g)) {this.value = this.value.replace(/[^0-9]/g, '')};
if( $(this).val().length > 3) $(this).val($(this).val().substr(0, 3)); 
});


    
//ФОРМА    
  //При клике на нашу кнопку
  $('a[href="#sendmyform"]').click(function(e) {e.preventDefault();
  //Получаем значения из полей     
    let typeplace= $('input[name="typeplace"]:checked').val();//Тип помещения
    let typeclean= $('input[name="typeclean"]').val();//Тип уборки
    let ploshad = $('input[name="ploshad"]').val();//Площадь уборки
    let dopuslugifirst = $('input[name="dopuslugifirst"]').val();//ДопУслуги первый список
    let dopuslugisecond = $('input[name="dopuslugisecond"]:checked').val();//ДопУслуги второй список
    let animals = $('select[name="animals"]').val();//Животные
    let sanuz = $('input[name="sanuz"]').val();//С-узел
    let carpet = $('input[name="carpet"]').val();//Ковёр
    let night = $('input[name="night"]').val();//Ночь
  
    
  //Передаём наши собранные данные в основную форму  
    $('input[name="sendtypeplace"]').val(typeplace);//Тип помещения
    $('input[name="sendtypeclean"]').val(typeclean);//Тип уборки
    $('input[name="sendploshad"]').val(ploshad);//Площадь уборки
    $('input[name="senddop1"]').val(dopuslugifirst);//ДопУслуги первый список
    $('input[name="senddop2"]').val(dopuslugisecond);//ДопУслуги второй список
    $('input[name="sendanimals"]').val(animals);//Животные
    $('input[name="sendsanuz"]').val(sanuz);//С-узел
    $('input[name="sendcarpet"]').val(carpet);//Ковёр
    $('input[name="sendnight"]').val(night);//Ночь
    
    $('input[name="senditogo"]').val($summelem.html());//Поле с итоговой ценой, калькулятор   
  
  
var fullinput=true;   
$('.t-input-group').removeClass('js-error-control-box');
$(calcID).find('.js-tilda-rule[data-tilda-req="1"]').each(function() {
  if($(this).val()==''){$(this).closest('form').find('.t-submit').click(); fullinput=false; return false;};
});
if(fullinput){
$(calcID).find('input[type="radio"][data-tilda-req="1"].js-tilda-rule').closest('.t-input-block').each(function() {
  if(!$(this).find('input[type="radio"]').is(':checked')){$(this).closest('form').find('.t-submit').click();fullinput=false; return false;  
};});};
if(fullinput){
$(calcID).find('input[type="checkbox"][data-tilda-req="1"].js-tilda-rule').each(function() {
  if (!$(this).is(':checked')){ $(this).closest('form').find('.t-submit').click(); fullinput=false; return false;};
});};
//ОТправляем данные основной формы
if(fullinput){$('div[data-elem-id="1562169314349"] .t-submit').click();};
});
$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});;
});
</script>
Made on
Tilda