Подключаем подсказки по ФИО и адресам к «Тильде»

Для примера мы собрали в «Тильде» типичную форму заказа из трех полей: ФИО, адрес и телефон. В статье подключим к этим полям автодополнение — всплывающие подсказки.

Будем использовать сервис «Подсказки» «Дадаты». С ним человек введет первые буквы, например, адреса, и форма подскажет варианты — сразу без ошибок и в едином формате. Так контакты не придется перепроверять вручную. А еще с «Подсказками» покупатели вводят данные на 300% быстрее, поэтому заполняют формы без раздражения и реже бросают.

1. Добавить блок «HTML-код» на страницу с формой

«Подсказки» заработают в «Тильде», если добавить специальный код на страницу с формой. Этот код нельзя просто так вставить на страницу — только в контейнер «HTML-код» из библиотеки готовых блоков «Тильды». Несмотря на название, он поддерживает любые языки программирования, включая JavaScript.

2. Подставить в этот блок шаблон «Подсказок»

Разработчики «Дадаты» подготовили шаблон кода, который запускает «Подсказки» в «Тильде»:

<link href="https://cdn.jsdelivr.net/npm/@dadata/suggestions@25.11.0/dist/suggestions.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@dadata/suggestions@25.11.0/dist/suggestions.min.js"></script>

<script>
  function suggest () {
    const token = "Ваш API-ключ"
    const form = document.querySelector('ID формы')
    const input = form.querySelector('[name="Имя поля"]');
    
    Dadata.createSuggestions(input, {
        token: token,
        type: "Тип подсказок"
    });
  }

  document.addEventListener('DOMContentLoaded', setTimeout(suggest, 1000));
</script>

Нужно скопировать текст шаблона и вставить в блок «HTML-код», который вы добавили на предыдущем шаге:

3. Подставить в шаблон ваш API-ключ

Чтобы «Подсказки» работали, понадобится API-ключ — это такой пароль от сервиса. Ключ мы выдаем только зарегистрированным пользователям. Если вы уже регистрировались в «Дадате», стоит войти в аккаунт, если нет — создать. Регистрация бесплатная, занимает минуту.

Теперь нужно скопировать API-ключ из личного кабинета и подставить в код «Подсказок» — вместо слов «Ваш API-ключ»:

4. Подставить в шаблон ID формы, в которой будут работать «Подсказки»

Вы добавили код «Подсказок» на страницу, но пока они не понимают, в какой форме срабатывать. Чтобы понимали, в код важно подставить ID — уникальный номер формы из девяти цифр.

«Тильда» не показывает ID форм, зато показывает ID блоков с формами. Они совпадают с единственным различием: если ID блока — «#rec123456789», то ID формы — «#form123456789». Чтобы посмотреть ID блока с формой, откройте его настройки и пролистайте в самый низ.

Теперь ID формы нужно подставить в код «Подсказок» — вместо слов «ID формы».

5. Подставить в шаблон название первого поля, в котором будут срабатывать «Подсказки»

«Подсказки» уже понимают, в какой форме срабатывать, но еще не знают — в каком из полей. Чтобы знали, в код важно добавить название поля. 

Название поля в «Тильде» — имя переменной этого поля. Пользователи могут сами задавать имена переменных. Для этого нужно:

• навести курсор на блок с формой и перейти на вкладку «Контент» (в «Зеро-блоке» — кликнуть на форму → и перейти на вкладку «Поля ввода»);
• открыть список полей для ввода и найти поле, к которому вы подключаете «Подсказки»;
• в строке «Имя переменной» написать название поля. Можно назвать поле как угодно, главное — латиницей.

Теперь название поля нужно прописать в коде «Подсказок» — вместо слов «Имя поля»:

6. Указать тип «Подсказок» для первого поля, в котором будет срабатывать автодополнение

«Подсказки» уже понимают, в каком поле срабатывать. Но пока не знают, что подсказывать: адреса, ФИО, организации или вообще мировые суды. Чтобы понимали, в коде важно прописать тип «Подсказок».

Для удобства, мы собрали перечень типов «Подсказок»:

• адреса — «address»;
• ФИО — «name»;
• организации России — «party»;
• организации Беларуси — «party_by»
• организации Казахстана — «party_kz»
• банки — «bank»;
• емейлы — «email»;
• кем выдан паспорт — «fms_unit»;
• почтовые отделения — «postal_unit»;
• налоговые инспекции — «fns_unit»;
• таможни — «fts_unit»;
• суды — «region_court»;
• станции метро — «metro»;
• марки автомобилей — «car_brand»;
• товары и услуги — «mktu»;
• медицинские должности — «medical_position»;
• профессии — «okpdtr_profession»;
• должности — «okpdtr_position»;
• страны — «country»;
• валюты — «currency»;
• ОКВЭД — «okved2»;
• ОКПД — «okpd2»;
• ОКТМО — «oktmo».

Нужный тип «Подсказок» следует подставить в код — вместо слов «Тип подсказок».

7. Подключить «Подсказки» к остальным полям формы в «Тильде»

Мы подключили «Подсказки» к полю «ФИО», теперь подключим к полю «Адрес»: такие условия у задачи в статье.

Первым делом в коде «Подсказок» выделим ту часть, которая отвечает за «Подсказки по ФИО»:

Теперь продублируем выделенную часть в коде:

С новой частью кода проделаем шаги «5» и «6» из инструкции: подставим имя переменной поля «Адрес» и другой тип «Подсказок» — по адресам.

Наконец, заменим названия переменных в коде. Они могут быть любыми, главное — разными:

Аналогичным образом можно подключить «Подсказки» для любых других полей формы. Достаточно продублировать часть кода и обновить типы «Подсказок», названия полей и переменных.

8. Осталось опубликовать страницу, и «Подсказки» в «Тильде» заработают

Если «Подсказки» не заработали, проверьте

1. Что вы указали в коде API-ключ из личного кабинета.

2. В код вы подставили идентификатор (ID) блока с формой, а не соседнего блока. И заменили «#rec*********» на «#form*********».

3. Вы задали имя переменной для поля, в котором будут работать «Подсказки». И указали это имя в коде.

4. В коде нет кавычек («»).