Как сделать второй шаг в форме в ZeroBlock в Tilda
Step into a world of unparalleled service and personalized attention to detail

Как сделать второй шаг в форме в ZeroBlock в Tilda

1
Создали форму в ZeroBlock
2
Добавили в неё 9 полей и задали форме класс twowayform
3
Добавили код в блок Другое - Т123
В коде указали
- С какого по счёту скрыть лишние поля ( с шестого) (n + 6)
- Сколько полей в первом шаге index() > 4 (пять, так как отсчёт от нуля)
Библиотека для примера
<style>
.twowayform .t-form__inputsbox .t-input-group:nth-child(n + 6) {display: none}
.twowayform .t-form__inputsbox {display: flex;justify-content: space-between;}
.twowayform .t-input-group {display: block}
.js-error-control-box .js-tilda-rule {box-shadow: 0px 3px 0px 0px #ff0000}
button.t-submit:hover {
    background-color: #fff !important;
    color: #111 !important;
}
button.t-submit {transition: all 0.3s}
@media screen and (max-width:960px){.twowayform .t-form__inputsbox {display: block}}
</style>

<script>
$( document ).ready(function() {
function controlbtn(){
setTimeout(function(){ $('.twowayform  .t-submit').attr('type','')}, 3000);
};controlbtn();
function showerrorinfo(){
setTimeout(function(){$('.twowayform .t-submit').attr('type','submit');$('.twowayform .t-submit').click() }, 300);
setTimeout(function(){$('.twowayform  .t-submit').attr('type','')}, 600);
};
let laststep=false;
$(document).on('click','.twowayform .tn-form__submit',function(e){ 
let fullinput=true; 
$('.twowayform .t-input-group').removeClass('js-error-control-box');
$(this).closest('.t396__artboard').find('.js-tilda-rule[data-tilda-req="1"]').each(function() {
  if($(this).val()==''){showerrorinfo();fullinput=false; return false};
});
if(fullinput){
$(this).closest('.t396__artboard').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')){showerrorinfo();fullinput=false; return false};
});
};
if(fullinput){
$(this).closest('.t396__artboard').find('input[type="checkbox"][data-tilda-req="1"].js-tilda-rule').each(function() {
  if (!$(this).is(':checked')){showerrorinfo();fullinput=false; return false};
});
};
setTimeout(function(){
if ( !fullinput && !laststep && $('.t-input-group.js-error-control-box').index() > 4  ){ 
$('.twowayform .t-input-group').removeClass('js-error-control-box');$('#tilda-popup-for-error').hide();
$('.twowayform  .t-submit').text('Submit');$('.twowayform .t-input-group').toggle();
laststep=true;
};
if(fullinput && laststep){
//Отправляем данные основной формы
$('.twowayform .t-submit').attr('type','submit');
$('.twowayform .t-submit').click();
};   
}, 310);
});

$( window ).resize(function(){ laststep=false; controlbtn() });
$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});
window.mySuccessFunction= function(){$(window).trigger('resize')};
setTimeout(function () {
 $('.twowayform .js-form-proccess').each(function(){
    $(this).attr('data-success-callback', 'window.mySuccessFunction');
 });
}, 4000);
});
</script>
Made on
Tilda