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

Оформить доступ с промокодом
100
Как сделать сложный калькулятор в ZeroBlock в Tilda
Калькулятор уборки в ZeroBlock
Рассчитываем стоимость уборки в калькуляторе, который создали в ZeroBlock. Пример приведён ниже
Шаг 1: Выберите тип помещения
Шаг 2: Выберите тип уборки
40
40
220
Шаг 4: Дополнительные услуги
+683
Afghanistan (افغانستان)
+93
Albania (Shqipëri)
+355
Algeria (الجزائر)
+213
Andorra
+376
Angola
+244
Armenia (Հայաստան)
+374
Antigua and Barbuda
+1 (268)
Argentina
+54
Australia
+61
Austria (Österreich)
+43
Azerbaijan (Azərbaycan)
+994
Bahamas
+1 (242)
Bahrain (البحرين)
+973
Bangladesh (বাংলাদেশ)
+880
Barbados
+1 (246)
Belarus (Беларусь)
+375
Belgium (België)
+32
Belize
+501
Benin (Bénin)
+229
Bhutan (འབྲུག)
+975
Bolivia
+591
Bosnia and Herzegovina
+387
Botswana
+267
Brazil (Brasil)
+55
Brunei
+673
Bulgaria (България)
+359
Burkina Faso
+226
Burundi (Uburundi)
+257
Cambodia (កម្ពុជា)
+855
Cameroon (Cameroun)
+237
Canada
+1
Cape Verde (Kabu Verdi)
+238
Caribbean Netherlands
+599
Cayman Islands
+1
Central African Republic (République centrafricaine)
+236
Chad (Tchad)
+235
Chile
+56
China (中国)
+86
Colombia
+57
Comoros (جزر القمر)
+269
Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)
+243
Congo (Republic) (Congo-Brazzaville)
+242
Cook Islands
+682
Costa Rica
+506
Cote d’Ivoire
+225
Croatia (Hrvatska)
+385
Cuba
+53
Cyprus (Κύπρος)
+357
Czech Republic (Česká republika)
+420
Denmark (Danmark)
+45
Djibouti
+253
Dominica
+1 (767)
Dominican Republic (República Dominicana)
+1
Ecuador
+593
Egypt (مصر)
+20
El Salvador
+503
Equatorial Guinea (Guinea Ecuatorial)
+240
Eritrea
+291
Estonia (Eesti)
+372
Ethiopia
+251
Fiji
+679
Finland (Suomi)
+358
France
+33
Gabon
+241
Gambia
+220
Georgia (საქართველო)
+995
Germany (Deutschland)
+49
Ghana (Gaana)
+233
Greece (Ελλάδα)
+30
Grenada
+1 (473)
Guatemala
+502
Guinea (Guinée)
+224
Guinea-Bissau (Guiné Bissau)
+245
Guyana
+592
Haiti
+509
Honduras
+504
Hong Kong (香港)
+852
Hungary (Magyarország)
+36
Iceland (Ísland)
+354
India (भारत)
+91
Indonesia
+62
Iran (ایران)
+98
Iraq (العراق)
+964
Ireland
+353
Israel (ישראל)
+972
Italy (Italia)
+39
Jamaica
+1
Japan (日本)
+81
Jordan (الأردن)
+962
Kazakhstan (Казахстан)
+7
Kenya
+254
Kiribati
+686
Kosovo (Republic)
+383
Kuwait (الكويت)
+965
Kyrgyzstan (Кыргызстан)
+996
Laos (ລາວ)
+856
Latvia (Latvija)
+371
Lebanon (لبنان)
+961
Lesotho
+266
Liberia
+231
Libya (ليبيا)
+218
Liechtenstein
+423
Lithuania (Lietuva)
+370
Luxembourg
+352
Macao
+853
Macedonia (FYROM) (Македонија)
+389
Madagascar (Madagasikara)
+261
Malawi
+265
Malaysia
+60
Maldives
+960
Mali
+223
Malta
+356
Marshall Islands
+692
Mauritania (موريتانيا)
+222
Mauritius (Moris)
+230
Mexico (México)
+52
Mexico (México)
+521
Micronesia
+691
Moldova (Republica Moldova)
+373
Monaco
+377
Mongolia (Монгол)
+976
Montenegro (Crna Gora)
+382
Morocco (المغرب)
+212
Mozambique (Moçambique)
+258
Myanmar (Burma) (မြန်မာ)
+95
Namibia (Namibië)
+264
Nauru
+674
Nepal (नेपाल)
+977
Netherlands (Nederland)
+31
New Caledonia
+687
New Zealand
+64
Nicaragua
+505
Niger (Nijar)
+227
Nigeria
+234
Niue
+683
North Korea (조선 민주주의 인민 공화국)
+850
Norway (Norge)
+47
Oman (عُمان)
+968
Panama
+507
Pakistan (پاکستان)
+92
Palau
+680
Palestinian Territory
+970
Papua New Guinea
+675
Paraguay
+595
Peru (Perú)
+51
Philippines
+63
Poland (Polska)
+48
Portugal
+351
Qatar (قطر)
+974
Romania (România)
+40
Russian Federation (Российская Федерация)
+7
Rwanda
+250
Saint Kitts and Nevis
+1 (869)
Saint Lucia
+1 (758)
Saint Vincent and the Grenadines
+1 (784)
Samoa
+685
San Marino
+378
Sao Tome and Principe (São Tomé e Príncipe)
+239
Saudi Arabia (المملكة العربية السعودية)
+966
Senegal (Sénégal)
+221
Serbia (Србија)
+381
Seychelles
+248
Sierra Leone
+232
Singapore
+65
Slovakia (Slovensko)
+421
Slovenia (Slovenija)
+386
Solomon Islands
+677
Somalia (Soomaaliya)
+252
South Africa
+27
South Korea (대한민국)
+82
South Sudan (جنوب السودان)
+211
Spain (España)
+34
Sri Lanka (ශ්‍රී ලංකාව)
+94
Sudan (السودان)
+249
Suriname
+597
Swaziland
+268
Sweden (Sverige)
+46
Switzerland (Schweiz)
+41
Syria (سوريا)
+963
Taiwan (台灣)
+886
Tajikistan
+992
Tanzania
+255
Thailand (ไทย)
+66
Togo
+228
Tonga
+676
Trinidad and Tobago
+1 (868)
Tunisia (تونس)
+216
Turkey (Türkiye)
+90
Turkmenistan
+993
Tuvalu
+688
Uganda
+256
Ukraine (Україна)
+380
United Arab Emirates (الإمارات العربية المتحدة)
+971
United Kingdom
+44
USA
+1
Uruguay
+598
Uzbekistan (Oʻzbekiston)
+998
Vanuatu
+678
Vatican City (Città del Vaticano)
+39
Venezuela
+58
Vietnam (Việt Nam)
+84
Yemen (اليمن)
+967
Zambia
+260
Zimbabwe
+263
Стоимость уборки:
Заказать уборку
Шаг 11: Ваши контактные данные
Шаг 4*: Дополнительные услуги
* Данный расчет является предварительным, детальную стоимость уточняйте у менеджеров компании
+
Шаг 9: Ночная уборка
3300 руб.
Шаг 6: Файл
Add files
Add more files
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Делаем сложный калькулятор в ZeroBlock со свободным позиционированием элементов

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

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

Заказать установку примера
1
Создали ZeroBlock и добавили в него 13 элементов Form и один элемент Button ( с классом sendform)
2
Выбрали основную форму (в примере это Телефон, ФИО, Адрес) и задали ей класс mainform
3
Остальным формам в блоке задали класс slaveform
4
Формулу для калькулятора задана обычной линейной функцией
5
Добавили скрипт на страницу
Скрипт вставляется в блок Другое - Т123
Библиотека для примера
Скопировать код
<!-- Как сделать сложный калькулятор в ZeroBlock в Tilda mo-ti.ru --><script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script>
<style>
.sendform {cursor:pointer}
.mainform .hide-input-mode {
    opacity: 0;
    height: 0;
    max-height: 0;
    min-height: 0;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    z-index: -10;
}
</style>

<script>
$( document ).ready(function() {
let formID='';
//При клике на нашу кнопку
$('.sendform').click(function(e) {e.preventDefault();
    formID = '#' + $(this).closest('.t-rec').attr('id');
    let fullinput=true;   
    $('.t-input-group').removeClass('js-error-control-box');
    $(formID).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){
    $(formID).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){
    $(formID).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){
        $(formID).find('.slaveform').each(function(){
            $(this).find('.t-input-group').each(function(){
                $(this).addClass('hide-input-mode');
                $(this).clone().appendTo(formID+" .mainform .t-form__inputsbox");   
                if( $(this).hasClass('t-input-group_sb') ){
                    let selectName = $(this).find('select').attr('name');
                    $(formID+' .mainform select[name="'+selectName+'"]').val( $(formID+' .slaveform select[name="'+selectName+'"]').val() );
                };
            });
        });
    //Отправляем данные основной формы       
    setTimeout(function(){  $(formID).find('.mainform .t-submit').click() }, 500);
    };
});
$(formID+' .mainform').delegate(".t-submit", "click", function(){
    setTimeout(function(){
        if ( $(formID+' .mainform .t-form').hasClass("js-send-form-success")){
            $(formID+' .mainform .hide-input-mode').remove();
            //$(formID+' .slaveform').find('input').val('');
            //$(formID+' .slaveform').find('textarea').val(' ');
            $(formID+' .slaveform select option:first').prop('selected', true);
            $(formID+' input').prop('checked', false);
            let recID = formID.replace(/[^0-9]/g, '');t396_init(recID);
        };
    }, 1000);
});    
$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});
});
</script>
Библиотека для примера
Стили из примера
Скопировать код
<!-- Как сделать сложный калькулятор в ZeroBlock в Tilda mo-ti.ru -->
<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>
Made on
Tilda