[Инструкция] Как к «Тильде» подключить подсказки по ФИО и адресам

У «Тильды» нет интеграции с сервисами подсказок: нужны навыки программирования, чтобы подключить их к форме ввода. Но наши разработчики сделали шаблон кода, который решает проблему. Достаточно скопировать текст на лендинг, заменить несколько слов, и подсказки по ФИО и адресам заработают в «Тильде».

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

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

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

Мы уже показывали, как подключить «Подсказки» без программиста. Но для «Тильды» инструкция не годится — в конструкторе полям не присваивают ID и не разрешают пользователям их задавать. Поэтому мы приготовили отдельную статью.

Если вы не понимаете, о чём идёт речь в описании ниже, или что-то не получается — к сожалению, мы не сможем помочь. Обратитесь к штатному программисту или наймите фрилансера.

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

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

Вставить блок можно в любое место на лендинге, но лучше — в конец. Так «Подсказки» не будут влиять на скорость загрузки страницы

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

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

<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.1/dist/css/suggestions.min.css" type="text/css" rel="stylesheet" />
<style>
    .t-input-block{
        overflow:visible !important;
    } 
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.1/dist/js/jquery.suggestions.min.js"></script>

<script type="text/javascript">
    function createSuggestions($form){
        $form.find("[name='ИМЯ_ПОЛЯ']").suggestions({
          token: "ВАШ_API_КЛЮЧ",
          type: "ТИП_ПОДСКАЗОК",
      });
    }
    
    $(document).ready(function(){
        setTimeout(function() {
            var $form = $("#ID_ФОРМЫ");
            createSuggestions($form);
        }, 1000);
    })

</script>

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

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

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

Ключ будет лежать в личном кабинете на сайте «Дадаты»

Теперь нужно скопировать API-ключ из личного кабинета и подставить в код «Подсказок» — вместо слов «ВАШ_API_КЛЮЧ»:

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

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

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

ID блока — «#rec454292154», значит, ID формы — «#form454292154»

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

Важно оставить решетку (#) перед ID — #form454292154

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

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

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

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

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

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

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

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

  • по адресам — «ADDRESS»;
  • ФИО — «NAME»;
  • организациям — «PARTY»;
  • банкам — «BANK»;
  • емейлам — «EMAIL»;
  • ФИАС — «FIAS»;
  • местам выдачи паспорта — «fms_unit»;
  • почтовым отделениям — «postal_unit»;
  • налоговым инспекциям — «fns_unit»;
  • таможням — «fts_unit»;
  • мировым судам — «region_court»;
  • станциям метро — «metro»;
  • маркам автомобилей — «car_brand»;
  • товарам и услугам — «mktu»;
  • странам — «country»;
  • валютам — «currency»;
  • ОКВЭД — «okved2»;
  • ОКПД — «okpd2»;
  • ОКТМО — «oktmo».

Нужный тип «Подсказок» следует подставить в код — вместо слов «ТИП_ПОДСКАЗОК».

К полю «ФИО» подключим «Подсказки по ФИО», поэтому укажем тип «NAME». Кавычки («») вставлять не нужно

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

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

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

Тут мы говорим «Подсказкам»: «Подсказывайте ФИО в поле, которое называется „Name“»

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

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

Переменную поля «Адрес» мы назвали «Address», тип «Подсказок» — «ADDRESS»

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

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

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

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

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

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

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

Что дальше

Инструкция помогает подключить автодополнение к полям в форме — без навыков программирования. А разработчик поможет решить более сложные задачи. Например:

— по наименованию организации найти ее реквизиты и автоматически расставить по полям в форме;

— автоматически подставлять индекс для найденного адреса в соответствующее поле;

— подсказывать адреса только по конкретному городу.

Инструкция сэкономит разработчику время: не придется писать код с нуля — достаточно дописать к шаблону пару функций на JavaScript. 

В любом случае понадобится API-ключ «Дадаты». Его получают после регистрации на нашем сайте.

Главное за месяц
у вас на почте

Раз в месяц пришлем на почту лучшие статьи блога и главные обновления «Дадаты». Так вы не пропустите ничего важного. Без спама.
Читайте статьи там, где удобно

Статьи по теме

Поможем заполнить адреса с комнатами

Основы

Поможем заполнить адреса с комнатами

Обычно адреса в России заканчиваются квартирой. Но в справочнике налоговой, ГАР, встречаются адреса с комнатами — «Куркинское шоссе, д 17, кв 173, ком 1». Например, если человек живет в общежитии. Раньше «Подсказки» игнорировали комнаты, а теперь показывают адреса с ними в списке вариантов.

Подсветим организацию с недостоверными сведениями в ЕГРЮЛ

Основы

Подсветим организацию с недостоверными сведениями в ЕГРЮЛ

Налоговая может признать сведения об учредителе, руководителе или адресе юрлица недостоверными. Например, если директора признают массовым или по адресу не обнаружат компанию. «Дадата» же заметит недостоверные сведения в ЕГРЮЛ и убережет вас от работы с возможным мошенником.

[Инструкция] Как подключить подсказки по адресам, ФИО, емейлам и компаниям к интернет-магазину на WordPress

Инструкции

[Инструкция] Как подключить подсказки по адресам, ФИО, емейлам и компаниям к интернет-магазину на WordPress

Разработчик-энтузиаст Антон Троянов сделал плагин, который подключает всплывающие подсказки к формам в Wordpress. Достаточно установить его в конструкторе сайтов, и на странице оформления заказа заработает автодополнение по ФИО, адресам и емейлам. В статье разберем процесс по шагам.

Три способа ускорить работу аналитика данных и докопаться до неочевидных выводов. Показываем на примере исследования рынка общепита

Кейсыосновы

Три способа ускорить работу аналитика данных и докопаться до неочевидных выводов. Показываем на примере исследования рынка общепита

С помощью «Дадаты» аналитик обогатила базу данных, определила наиболее конкурентные локации на рынке общепита и визуализировала плотность заведений на карте. В этой статье покажем, как она это сделала.