Как изменить набор полей при выборе количества в форме в Tilda
Форма для Агенства
1
6
Персона 1
Персона 2
Персона 3
Персона 4
Персона 5
Персона 6

Как изменить набор полей при выборе количества в форме в Tilda

1
Создали форму BF310N в 2 шага и добавили в неё поля
2
Для управления использовали поле RangeSlider c именем quantpl и лимитами от 1 до 6
3
На втором шаге добавили набор из полей для каждого человека, т.е. 6 наборов:
- комментарий
- выпадающий список
- дата
- поле для ввода
- телефон с автомаской
4
Вставили код в блок Другое - T123
В коде указали
var colelemgr = 5; //Кол-во элементов в группе
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Меняем количество полей в пошаговой форме, опираясь на положение RangeSlider.
Длительность видео: 17 минут
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
 $( document ).ready(function() {
   var colelemgr = 5; //Кол-во  элементов в группе
  setTimeout(function(){
   $('.t696 .t-form__screen-wrapper:eq(1) .t-input-group').addClass('changeinp');
   var colall = $('.changeinp').length;
       $('.changeinp').slice(colelemgr,colall).addClass('changegroup inpactive');
  }, 1000); 

function createinp(){
    $('.changegroup').addClass('inpactive');
    var checkrangepos = Number($('input[name="quantpl"]').next('.t-range__value-txt').html());
  if (checkrangepos>1){
    for (let i = 0; i < colelemgr*(checkrangepos-1); i++) { 
      $('.changegroup:eq('+i+')').removeClass('inpactive');
    };
  };
   var top = $('.t696').offset().top-34;
        $('html, body').animate({scrollTop: top}, 0);
};

//При переходе на сделующий шаг
 $(document).on('click','.t696 .t-form__screen-btn-next',function(e){
 createinp();
 $('.t-input-group_ph.changegroup.inpactive input[type="hidden"]').removeClass('js-tilda-rule');
   $('.changegroup.inpactive .t-input').val('');
   $('.changegroup.inpactive input[type="tel"]').attr('data-phonemask-current','').next('input').val('');
   $('.changegroup.inpactive').each(function (index, value){
     $(this).find('select :first').prop('selected', true);
   });
 });

//При переходе на предыдущий шаг
 $(document).on('click','.t696 .t-form__screen-btn-prev',function(e){
    createinp();
    $('.t-input-group_ph.changegroup input[type="hidden"]').addClass('js-tilda-rule');
 });
        
});
</script>
Стили формы из примера

<style>
.t696 .t-form__screen-wrapper_active {
    display: flex !important;
    flex-wrap: wrap;
    box-shadow: 0 0 2px 1px #e8e8e8;
    padding: 20px 0;
}
.t696 .t-input-group {
    margin-bottom: 0px;
    width: calc(50% - 30px);
    padding: 0 15px;
}

@media screen and (max-width: 640px){
.t696 .t-input-group {
    width: 100%;
}   
}



.t696 .t-input-group_rg , .t696  .t-input-group_tx{
     width: 100% !important; 
}

.t696 .t-select {
    height: 56px;
}
.t696 .t-input-title {
    height: auto;
}

.t696__content {
    padding: 25px 25px 25px;
}
.t696__text-wrapper {
    margin-bottom: 40px;
}
.t696 .t-form__inputsbox {
    max-width: none;
}
.t696 .t-input-block {
    margin-bottom: 15px;
}

.t696 .t-input-group_tx {
    background-color: #f9f9f9;
    margin-top: -20px;
    margin-bottom: 20px !important;
}

.t696 .t-input-group_tx .t-text {
    padding-top: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #adadad;
}
.t696 .t-input-group_ph {
    margin-bottom: 40px !important;
}

.inpactive{
    display:none;
}
</style>
Made on
Tilda