Как в Тильде добавить дополнительное поле в форму при выборе радиокнопки

Вы сможете добавить дополнительное поле для ввода в форме при выборе варианта радиокнопки. Скрипт работает со всеми формами, как со стандартными блоками, так и с ZeroBlock.

Пример

Пример стандартной формы на блоке BF204N
Выберите способ связи

Пример

Пример стандартной формы на блоке BF502N и на форме ZeroBlock, скрытой в PopUp

Инструкция

  1. Копируете код в T123;
  2. Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
  3. Создаете Форму;
  4. Добавляете элементы;
  5. Сопоставляете значение поля формы со значением радиокнопки в настройках* скрипта;
  6. Публикуйте страницу.


*Настройки помечены комментариями в коде.

Код примера

<!--
 * Name: Показываем инпут при выборе радиокнопки
 * Description: Код добавляет возможность скрывать или отображать поля формы при выборе радиокнопки
 * Author: ANKU
 * URL: https://anku.one/add-input
-->
<script>
    // Добавьте id блоков c формой или класс блока с фомой
    const formSectionSelectors = ['#rec806707577', '#rec806755451', '.uc-main-702'];
    
    // Заполните настройки для каждого блока
    const formSettings = {
        // Старт настроек для блока с формой
        '#rec806707577': {
            inputNamesToHide: ['phone', 'telegram', 'other'],
            radioValuesMapping: {
                'Телефон': 'phone',
                'Телеграм': 'telegram',
                'Прочее': 'other',
            }
        },
        // Конец настроек для блока с формой
        
        // Старт настроек для блока с формой
        '#rec806755451': { // 396
            inputNamesToHide: ['email', 'fax', 'other'],
            radioValuesMapping: {
                'Email': 'email',
                'Факс': 'fax',
                'Прочее': 'other',
            }
        },
        // Конец настроек для блока с формой
        
        // Старт настроек для блока с формой
        '.uc-main-702': {
            inputNamesToHide: ['address', 'zip', 'other'],
            radioValuesMapping: {
                'Адрес': 'address',
                'Индекс': 'zip',
                'Прочее': 'other',
            }
        },
        // Конец настроек для блока с формой
        
        // Добавьте еще блоки по аналогии
    };    
    // Не менять код ниже этого комментария
    function handleRadioSelection(){Object.keys(formSettings).forEach(e=>{let t=formSettings[e],i=document.querySelector(e);if(i){let n=i.querySelector("form");if(n){let o=n.querySelectorAll('input[type="radio"]');function r(e){t.inputNamesToHide.forEach(i=>{let o=n.querySelector(`input[name="${i}"]`);if(o){let r=o.closest(".t-input-group");r&&(t.radioValuesMapping[e]===i?(r.style.display="block",r.classList.add("main-input-visible"),r.classList.remove("main-input-hidden"),o.setAttribute("data-tilda-req","1"),o.setAttribute("aria-required","true")):(r.style.display="none",r.classList.add("main-input-hidden"),r.classList.remove("main-input-visible"),o.removeAttribute("data-tilda-req"),o.removeAttribute("aria-required")))}})}let a=n.querySelector('input[type="radio"]:checked');a&&r(a.value),o.forEach(e=>{e.addEventListener("change",function(){r(this.value)})})}}}),!function e(){if(document.querySelector("#anku-form-choise-script"))return;let t=document.createElement("style");t.id="anku-form-choise-script",t.innerHTML=".main-input-hidden{display:none!important;}.main-input-visible{display:block!important;}";let i=document.querySelector("#allrecords");i?i.appendChild(t):console.error("#allrecords не найден на странице.")}()}function handleRadioSelectionForRecord396(){formSectionSelectors.forEach(e=>{let t=document.querySelector(e);t&&"396"===t.getAttribute("data-record-type")&&window.addEventListener("load",function(){t_onReady(function(){t_onFuncLoad("t396_init",function(){setTimeout(()=>{handleRadioSelection()},100)})})})})}function initANKUformsChoise(){handleRadioSelection(),handleRadioSelectionForRecord396(),console.log("Хочешь сделать формы с выбором полей в Tilda, смотри эту статью: https://anku.one/add-input")}"loading"!==document.readyState?initANKUformsChoise():document.addEventListener("DOMContentLoaded",function(){initANKUformsChoise()});
</script>

Дополнение

Данный код не тестировал на формах-квизах, только формы обратной связи в стандартных блоках и ZeroBlock. Скрипт может отображать и скрывать любые поля формы в любом количестве. Поле, которое отображено автоматически становится обязательным для заполнения, а скрытое поле теряет данное свойство, чтобы не нарушать корректную работу отправки данных.

Если есть вопросы или подобные задачи, пишите!
Made on
Tilda