Что такое ID блока?
У каждого блока на странице есть свой уникальный цифровой номер — ID блока. Чтобы посмотреть ID блока, откройте Настройки этого блока и прокрутите в самый низ:
ID блока можно увидеть не заходя в Настройки каждого блока, если установить данное расширение в браузер Tilda Publishing Helper.
Пример, как это будет выглядеть:
Похожие вопросы
- Как убрать «Made on Tilda» внизу страницы (в подвале сайта)?
- Как сделать кликабельным номер телефона?
- Как передать сайт или страницу на другой аккаунт?
- Как загрузить файл на свой сайт?
- Почему не видны изменения после публикации, а в предпросмотре есть?
Как создать свой шаблон
В библиотеке шаблонов на Тильде более 200 готовых страниц, которые можно использовать для создания собственных, заменив фото и текст. Готовый шаблон можно изменить до неузнаваемости — это только образец хорошего дизайна и пример использования блоков.
Страницы с вашим дизайном можно также сохранить как шаблон и использовать в дальнейшей работе, например, если у вас многостраничный сайт и внутри несколько однотипных страниц. Либо вы делаете персонализированные лендинги для разных клиентов — основа одна и та же, меняется только некоторые части страниц.
Собственные шаблоны также пригодятся, если вы работаете в команде — дизайнер делает шаблон, маркетолог меняет контент. Или центральный офис делает дизайн, филиалы корректируют содержание.
Ниже инструкция как сохранить страницу с вашим дизайном в качестве шаблона и как передать ваш шаблон другому пользователю.
[Инструкция] Как к «Тильде» подключить подсказки по ФИО и адресам
У «Тильды» нет интеграции с сервисами подсказок: нужны навыки программирования, чтобы подключить их к форме ввода. Но наши разработчики сделали шаблон кода, который решает проблему. Достаточно скопировать текст на лендинг, заменить несколько слов, и подсказки по ФИО и адресам заработают в «Тильде».
Для примера мы собрали в «Тильде» типичную форму заказа из трех полей: ФИО, адрес и телефон. В статье подключим к этим полям автодополнение — всплывающие подсказки.
Пригодится сервис «Подсказки» «Дадаты». С ним человек введет первые буквы, например, адреса, и форма подскажет варианты — сразу без ошибок и в едином формате. Так контакты не придется перепроверять вручную. А еще с «Подсказками» покупатели вводят данные на 300% быстрее, поэтому заполняют формы без раздражения и реже бросают.
Мы уже показывали, как подключить «Подсказки» без программиста. Но для «Тильды» инструкция не годится — в конструкторе полям не присваивают ID и не разрешают пользователям их задавать. Поэтому мы приготовили отдельную статью.
Если вы не понимаете, о чём идёт речь в описании ниже, или что-то не получается — к сожалению, мы не сможем помочь. Обратитесь к штатному программисту или наймите фрилансера.
1. Добавить блок «HTML-код» на страницу с формой
«Подсказки» заработают в «Тильде», если добавить специальный код на страницу с формой. Этот код нельзя просто так вставить на страницу — только в контейнер «HTML-код» из библиотеки готовых блоков «Тильды». Несмотря на название, он поддерживает любые языки программирования, включая JavaScript.
2. Подставить в этот блок шаблон «Подсказок»
Разработчики «Дадаты» подготовили шаблон кода, который запускает «Подсказки» в «Тильде»:
.t-input-block Нужно скопировать текст шаблона и вставить в блок «HTML-код», который вы добавили на предыдущем шаге:
3. Подставить в шаблон ваш API-ключ
Чтобы «Подсказки» работали, понадобится API-ключ — это такой пароль от сервиса. Ключ мы выдаем только зарегистрированным пользователям. Если вы уже регистрировались в «Дадате», стоит войти в аккаунт, если нет — создать. Регистрация бесплатная, занимает минуту.
Теперь нужно скопировать API-ключ из личного кабинета и подставить в код «Подсказок» — вместо слов «ВАШ_API_КЛЮЧ»:
4. Подставить в шаблон ID формы, в которой будут работать «Подсказки»
Вы добавили код «Подсказок» на страницу, но пока они не понимают, в какой форме срабатывать. Чтобы понимали, в код важно подставить ID — уникальный номер формы из девяти цифр.
«Тильда» не показывает ID форм, зато показывает ID блоков с формами. Они совпадают с единственным различием: если ID блока — «#rec123456789», то ID формы — «#form123456789». Чтобы посмотреть ID блока с формой, откройте его настройки и пролистайте в самый низ.
Теперь ID формы нужно подставить в код «Подсказок» — вместо слов «ID_ФОРМЫ».
5. Подставить в шаблон название первого поля, в котором будут срабатывать «Подсказки»
«Подсказки» уже понимают, в какой форме срабатывать, но еще не знают — в каком из полей. Чтобы знали, в код важно добавить название поля.
Название поля в «Тильде» — имя переменной этого поля. Пользователи могут сами задавать имена переменных. Для этого нужно:
- навести курсор на блок с формой и перейти на вкладку «Контент»;
- открыть список полей для ввода и найти поле, к которому вы подключаете «Подсказки»;
- в строке «Имя переменной» написать название поля. Можно назвать поле как угодно, главное — на латинице.
Теперь название поля нужно прописать в коде «Подсказок» — вместо слов «ИМЯ_ПОЛЯ»:
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».
Нужный тип «Подсказок» следует подставить в код — вместо слов «ТИП_ПОДСКАЗОК».
7. Подключить «Подсказки» к остальным полям формы в «Тильде»
Мы подключили «Подсказки» к полю «ФИО», теперь подключим к полю «Адрес»: такие условия у задачи в статье.
Первым делом в коде «Подсказок» выделим ту часть, которая отвечает за «Подсказки по ФИО»:
Теперь продублируем выделенную часть в коде:
С новой частью кода проделаем шаги «5» и «6» из инструкции: подставим имя переменной поля «Адрес» и другой тип «Подсказок» — по адресам.
Аналогичным образом можно подключить «Подсказки» для любых других полей формы. Достаточно продублировать часть кода и обновить тип «Подсказок» и название поле.
8. Осталось опубликовать страницу, и «Подсказки» в «Тильде» заработают
Если «Подсказки» не заработали, проверьте
1. Что вы указали в коде API-ключ из личного кабинета.
2. В код вы подставили идентификатор (ID) блока с формой, а не соседнего блока. И заменили «#rec*********» на «#form*********».
3. Вы задали имя переменной для поля, в котором будут работать «Подсказки». И указали это имя в коде.
4. В коде нет кавычек («»).
Что дальше
Инструкция помогает подключить автодополнение к полям в форме — без навыков программирования. А разработчик поможет решить более сложные задачи. Например:
— по наименованию организации найти ее реквизиты и автоматически расставить по полям в форме;
— автоматически подставлять индекс для найденного адреса в соответствующее поле;
— подсказывать адреса только по конкретному городу.
Инструкция сэкономит разработчику время: не придется писать код с нуля — достаточно дописать к шаблону пару функций на JavaScript.
В любом случае понадобится API-ключ «Дадаты». Его получают после регистрации на нашем сайте.
Главное за месяц
у вас на почте
Раз в месяц пришлем на почту лучшие статьи блога и главные обновления «Дадаты». Так вы не пропустите ничего важного. Без спама.
Как узнать id шаблона на тильде
Insects or Insecta are hexapod invertebrates and the largest group within the arthropod phylum. Definitions and circumscriptions vary; usually, insects comprise a class within the Arthropoda.
Some birds, especially corvids and parrots, are among the most intelligent animals; several bird species make and use tools, and many social species pass on knowledge across generations, which is considered a form of culture.
The pedosphere interfaces with the lithosphere, the hydrosphere, the atmosphere, and the biosphere. The term pedolith, used commonly to refer to the soil, translates to ground stone in the sense «fundamental stone».
In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower.
Water is an inorganic, transparent, tasteless, odorless, and nearly colorless chemical substance, which is the main constituent of Earth’s hydrosphere, and the fluids of most living organisms.