В каком разделе конструктора тильда настраивается прием заявок

Обновлено: 27.03.2024

Tilda (читается как «тильда») – это удобный и простой конструктор сайтов. Его используют, чтобы создавать небольшие ресурсы, состоящие из одной или нескольких страниц. Благодаря простоте и интуитивно понятному интерфейсу узнать, как сделать на «Тильде» собственный сайт, сможет кто угодно. И владелец малого бизнеса, и маркетолог, и блогер – навыки программирования для этого совершенно не нужны.

Add author snippet

Почему выбирают Tilda

в сайтах на «Тильде» акцент делается на внешней привлекательности. Обычно, чтобы сделать оформление красивым, приходится постараться: подключить знания по HTML и CSS, возможно, пригласить дизайнера. С Tilda все намного проще. Благодаря безупречной типографике и выверенным элементам можно получить красивую картинку даже без специальных знаний;

огромное количество подсказок, дружелюбный и интуитивно понятный интерфейс, пошаговые руководства – все это позволяет с легкостью создать сайт, не путаясь и не ошибаясь;

в Tilda множество шаблонов для ресурсов самой разной направленности: визиток, магазинов, лендингов.

Стоимость Tilda


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

Тариф Free

Бесплатная версия предлагает пользователю до 50 страниц и 50 мегабайт дискового пространства. Это довольно мало, но для сайта-визитки или лендинга такого объема обычно достаточно. Набор модулей, которые можно использовать во Free-версии, ограничен, это влияет на функциональность, поэтому серьезный многофункциональный ресурс в бесплатном тарифном плане «Тильды» создать не получится. Есть и еще несколько нюансов:

тариф Free не предполагает собственного доменного имени. Сайт разместится на поддомене, его имя будет выглядеть так: .tilda.ws. С одной стороны, на пользовательский опыт это не влияет, потому что большинство все равно переходит на сайт из контекстной рекламы или из поиска. С другой стороны, собственное доменное имя людям проще запомнить, да и доверия такие названия вызывают больше;

Тариф Personal

Тарифный план Personal стоит 500 рублей в месяц, то есть 6000 в год, что называют главным минусом «Тильды»: это всего лишь конструктор, но его цена выше, чем у некоторых полноценных CMS. Движки вроде Drupal или WordPress обойдутся дешевле даже с учетом аренды места на хостинге, а возможностей у владельца сайта будет больше. Впрочем, это не повод отказаться от использования конструктора со всеми его возможностями: по сути, вы платите за простоту и скорость создания сайта.

Тариф Business

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

создать до 5 сайтов;

экспортировать и скачать код на собственный сервер;

интегрировать сайт с WordPress.

Впрочем, в большинстве случаев такие возможности просто не нужны. Как минимум по цене, которую требует Tilda: 1000 рублей в месяц, 12 000 в год. За эти деньги проще воспользоваться CMS с открытым кодом.

Если бесплатный вариант подходит для фрилансеров, а тариф Personal – для авторов блогов, представителей e-commerce и малого бизнеса, то тарифный план Business не рекомендуется практически никому. Специалисты, которым может потребоваться такая функциональность, скорее воспользуются более дешевыми вариантами – движками и хостингами.

Планирование сайта

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



Что еще нужно учесть. Помимо структуры и наполнения, вы должны понимать, каким образом будете презентовать себя. «Тильда» позволяет сделать дизайн красивым без лишних сложностей, но при этом важно не потерять индивидуальность. Подумайте, как вы будете разговаривать с посетителем, что он должен подумать о вас и как воспринять ваш сайт. Значение имеет и цветовая гамма, и tone of voice – все, что так или иначе играет на впечатлении пользователя.

Результаты планирования. По итогам мозгового штурма у вас должны быть на руках сведения:

о цели и желаемой функциональности сайта;

внешнем виде и дизайне отдельных страниц.

Если вы решили собирать страницы с нуля, вам понадобятся инструменты прототипирования или лист бумаги, на котором вы примерно обрисуете, как будет выглядеть расположение блоков. В крайнем случае хотя бы список нужных элементов. Пригодятся здесь и примеры хороших, качественных сайтов: можно ориентироваться на них.

Если вы выбрали использование шаблона, такая подготовка тоже не помешает: шаблоны можно редактировать, изменяя элементы. Они довольно гибкие и одновременно защищают вас от ошибок в дизайне: тяжеловесности, неудобства, перегруженности.

Базовые настройки сайта на Tilda

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

Business неоправданно дорог, а Free для использования многих функций недостаточно, поэтому Personal – оптимальный вариант. Первые две недели – триал-версия, которая предоставляется бесплатно.



Дальше понадобится создать и настроить ресурс:

перейти в раздел «Мои сайты», выбрать вариант «Создать новый сайт»;

написать в соответствующих окнах название ресурса, его описание и имя субдомена. Он предоставляется по умолчанию, собственное доменное имя можно подключить в том же разделе;


настройте параметры в разделе «Настройки сайта». Если вам нужен свой домен, активируйте его сразу и вернитесь сюда позже. Как это делается, описано ниже.



1. Подключение счетчиков

Чтобы собирать статистику с сайта, понадобится добавить к нему аналитические системы поисковиков, перейти во вкладку «Аналитика & SEO», подключить там счетчики «Яндекс.Метрики» и Google Analytics, по желанию также Google Tag Manager.

Первый вариант – зарегистрировать доменное имя в этих системах, получить коды счетчиков и вписать их в соответствующее поле в настройках Tilda. В Яндексе это делается так.



В Google Analytics – так.



Второй – нажать в разделе «Аналитика & SEO» на кнопку «Подключить».



Примите запрос в аккаунте «Яндекса», выберите нужный счетчик и сохраните настройки. Код появится в соответствующей панели. Если на сайте уже были страницы, их понадобится опубликовать заново.

Аналогичным образом это делается для Google Analytics. Сначала зарегистрируйтесь в сервисе.



Затем нажмите на кнопку «Подключить».


Выберите подходящий счетчик.


2. Подключение вебмастерских панелей

Без этих инструментов отслеживать SEO-параметры и управлять продвижением намного сложнее, так что подключить их нужно.

Это делается в той же вкладке: достаточно нажать «Подключить» в соответствующих разделах, принять запрос в аккаунтах вебмастерских панелей и подождать автоматического подтверждения. Вам сразу же предложат поставить автоматически созданную карту сайта – сделайте это, потому что самостоятельно управлять sitemap в «Тильде» не получится.



Подключение платного домена к Tilda

Если вы выбрали вариант с собственным доменным именем, вам для начала понадобится его зарегистрировать, это делается на стороннем ресурсе, одном из многочисленных сайтов-регистраторов.

Как подключить домен к Tilda

перейдите в раздел «Управление доменом – DNS-серверы»;





в разделе «Управление зоной» удалите записи класса A и добавьте вместо них новые, с IP-адресом сервера Tilda;



в разделе «Добавить запись CNAME» впишите в соответствующие поля субдомен www и каноническое имя tilda.ws. Это нужно, чтобы сайт был доступен и по адресу с www, и без него.

Только после этого введите доменное имя в настройки самой «Тильды». Изменения вступят в силу через несколько часов.

Чтобы добавить форму на страницу сайта, созданного с помощью конструктора сайтов Tilda, Вам необходимо зайти во вкладку "Получить код" в необходимой форме и скопировать код из поля "Код для вставки на сайт. Javascript (рекомендуем)":

Как добавить форму в конструкторе сайтов Tilda 1

Далее перейдите в Tilda в режиме редактирования Вашего сайта и кликните в необходимом месте, где нужно вставить форму:

Как добавить форму в конструкторе сайтов Tilda 2

Важно. В конструкторе сайтов Tilda возможность добавлять html-блок, который используется для добавления специфичных функций, уникальных элементов, любой код, включая тэги script style, доступен только в платных тарифах.

Слева откроется библиотека блоков, опуститесь вниз и выберите раздел "Другое":

Как добавить форму в конструкторе сайтов Tilda 3

Как добавить форму в конструкторе сайтов Tilda 4

Этот блок добавится и далее нажмите кнопку "Контент" для редактирования:

Как добавить форму в конструкторе сайтов Tilda 5

Теперь, вставьте ранее скопированный код формы, в поле "HTML КОД/КОД ВИДЖЕТА":

Как добавить форму в конструкторе сайтов Tilda 6

Как добавить форму в конструкторе сайтов Tilda 7

Добавленный код сохранится и, чтобы увидеть изменения, кликните "Опубликовать":

Как добавить форму в конструкторе сайтов Tilda 8

После публикации форма будет уже отображена на странице сайта:

Как добавить форму в конструкторе сайтов Tilda 9

Если необходимо, чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо нажать кнопку "Контент":


Вам необходимо добавить такой код в поле "Ссылка для кнопки":


Где ID123456 - ID Вашей формы

Если Вы форму размещаете один раз на сайте, то в конструкторе выше кнопки, необходимо выбрать добавления HTML-блока в виде:


В этом блоке нужно добавить такой код:


После добавления сохраните и нажмите кнопку "Опубликовать":


При просмотре по клику на кнопку из тильды, откроется форма:


Если у Вас форма будет размещена на нескольких страницах сайта, то рекомендуем добавить код вызова формы в "head" сайта. Для этого Вам необходимом зайти в "Настройки сайта":


Выберите раздел "Ещё":


В поле "HTML-код для вставки внутрь HEAD", нажмите кнопку "Редактировать код":


Укажите аналогичный код:


Сохраните настройки и опубликуйте.

Описанный способ выше отлично работает. Также можно в другом виде добавить отображение попапа.

Чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо выбрать добавления HTML-блока в виде "Popup HTML-код в попапе":

Как добавить форму в конструкторе сайтов Tilda 10

Блок попапа добавится и далее нажмите кнопку "Контент" для редактирования

Как добавить форму в конструкторе сайтов Tilda 11

В Tilda попап работает таким образом:

  • когда страница загружается наш код выполняется, форма встраивается там где нужно
  • потом javascript код Tilda вырезает всё содержимое попапа и сохраняет где-то у себя
  • когда кликаешь на кнопку, то попап показывается и в него вставляется то содержимое, что он вырезал, но там у нас уже есть форма, а когда вставляется код, то вызывается еще раз наша форма, поэтому в некоторых случаях происходит дублирование формы

В режиме редактирования блока попапа вставляете такой же код, только необходимо добавить такие строчки, чтобы не было дублирования:

Как добавить форму в конструкторе сайтов Tilda 12

Этот код проверяет, если попап отображается, то делается небольшая задержка и форма вставляется, а если попап скрыт, то ничего не происходит.

В поле "ССЫЛКА НА POPUP", Вы должны использовать указанную ссылку для кнопок или блока, где должен показываться этот попап. Например, добавили кнопку "Кнопка всплывающего окна", заходим в настройки этой кнопки и в поле "ССЫЛКА ДЛЯ КНОПКИ" указываем ссылку, ранее полученную:

Как добавить форму в конструкторе сайтов Tilda 13

Если будете использовать код формы несколько раз на странице, то необходимо руководствоваться этой инструкцией по добавлению кода.

Теперь, при клике на заданную кнопку, откроется попап:

Если Вы будете вставлять всплывающее окно на страницу, в виде "Ушко", то скопируйте необходимый код в нашем конструкторе:

Как добавить форму в конструкторе сайтов Tilda 15

И также добавьте HTML-код и зайдите в настройки редактирования, кликнув кнопку "Контент":

Как добавить форму в конструкторе сайтов Tilda 16

Вставьте код в поле "HTML КОД/КОД ВИДЖЕТА", нажмите "Сохранить и закрыть" и "Опубликовать":

Как добавить форму в конструкторе сайтов Tilda 17

На сайте появится всплывающее окно в виде "Ушко":

Как добавить форму в конструкторе сайтов Tilda 18

Чтобы добавить всплывающее окно в виде кнопки, внешний вид которой, Вы можете настроить в нашем конструкторе, то таким же образом добавляете код с помощью HTML-блока. Аналогичным образом добавляется код и для всплывающего окна в виде автопоказа.

Стоит отметить, если Вы встраиваете несколько форм на странице, то необходимо изменить значение после ID формы: (form__X). Более подробную информацию найдёте здесь.

Данная интеграция будет полезна, если ваш сайт размещен на платформе Tilda, и вы хотите собирать контактные данные с помощью формы на нем.

Подготовка к интеграции

Перед настройкой интеграции вам нужно:

  • создать дополнительные поля в системе eSputnik, аналогичные полям, которые вы планируете добавить в форму;
  • подготовить письмо для подтверждения контакта (DOI);
  • подготовить форму подписки;
  • выбрать цель формы.

О создании дополнительных полей вы можете прочесть в специальной статье, а мы перейдем к следующим этапам подготовки.

Подготовка письма со ссылкой для подтверждения контакта

Кликните по кнопке, отвечающей за подтверждение подписки, и выберите одноименный тип ссылки.

При этом тип события выбирать не обязательно, т. к. он подставляется автоматически и является системным. При желании, вы можете настроить и свое событие.

Создание формы подписки

Перейдите во вкладку “Сайт” - “Формы”.

Здесь можно увидеть список созданных форм, количество запросов или заполнений каждой из них, а также дату последнего изменения. Здесь же можно удалить ненужную форму. Для этого нажмите на три точки напротив названия формы и выберите “Удалить”.

В колонке “Запросы” считается количество заполнений форм, а не количество новых контактов. Люди могут заполнить форму, но не подписаться, либо заполнить ее больше одного раза.

Введите произвольное название и выберите сервис (пока доступен только Tilda). Нажмите “Далее”.

Выбор цели формы

Следующий шаг - определить цель формы.

Необходимо выбрать, в какую группу будут добавляться контакты: в новую либо уже существующую. Если вы создаете новую группу, то задайте ей название и метки, которые будут полезны в быстрой навигации.

Определяем, какие данные собираем. Для этого есть три опции:

Новые. Используется для сбора новых подписчиков. Для данной опции необходимо будет использовать Double Opt-In. Далее вы сможете выбрать письмо для подтверждения контакта, которое запускается с помощью системного сценария.

Все. Могут подписываться как новые, так и старые контакты. Это можно использовать, например, для записи на вебинар. Для клиентов, которые ранее не были подписаны, необходимо использовать Double Opt-In. Если существующий клиент заполнит форму, то в систему не придет событие и письмо подтверждения отправлено не будет.

Дополнительные данные для существующих контактов. Эта опция нужна для обновления контактной информации, когда, например, нужно собрать данные о дате рождения клиента. Новые контакты подписаться не смогут, следовательно, использовать Double Opt-In не нужно.

Нажимаем “Далее” и переходим к следующему шагу.

Интеграция с Tilda

На вкладке “Интеграция с Tilda” добавьте ссылку на ваш сайт.

Вставьте URL для Webhook в аккаунте Tilda. Для этого:

Перейдите в личный кабинет Tilda и выберите ваш сайт.

Перейдите в настройки сайта, в раздел Формы, и выберите Webhook.

Далее скопируйте и вставьте автоматически сгенерированную ссылку в Webhook URL и нажмите кнопку “Добавить”. Ссылку можно найти на вкладке “Интеграция с Tilda”.

Вернитесь в личный кабинет и перейдите в режим редактирования сайта.

Наведите курсор на блок с формой подписки и нажмите кнопку “Контент”.

Выберите созданный Webhook в подключенных сервисах и нажмите кнопку "Сохранить и закрыть”.

Сопоставление полей

Есть три поля, которые добавляются в поля контакта в eSputnik автоматически: email, номер телефона и имя.

На выбор также доступные другие системные поля: пол, дата рождения, часовой пояс и прочие. Если вы собираете другие данные в форме подписки, например, модель телефона или возраст, тогда нужно создать дополнительные поля, а потом сопоставить их.

Для сопоставления доступны все поля простого типа: числовые и текстовые, а также чекбоксы, выпадающие списки, категории подписок и дата. Также можно выбрать формат даты и тип разделителя.

Есть два варианта сопоставить их:

Для форм, опубликованных на сайте и подключенных к Webhook:

Заполните вашу форму и отправьте запрос.

Слева будут отображаться параметры запроса: поля и данные пользователя с Tilda. Необходимо сопоставить их с нужными дополнительными полями, созданными в eSputnik.

Для форм, которые не опубликованы на сайте и не подключены к Webhook:

Нажмите "Новое поле" и создайте параметр запроса вручную.

Сопоставьте его с полем контакта

При сопоставлении данных с неопубликованной формой есть особенность: если в названии поля в Tilda есть пробел, например, “Your Age”, то его следует заменить на знак нижнего подчеркивания “_”, и запрос будет выглядеть так: “Your_Age”. Также нужно обращать внимание на регистры: они должны быть идентичными.

Проверка и редактирование настроек

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

Формы подписки по умолчанию создаются с включенным "Double opt-in".

Если вы сохраняете новые контакты, то необходимо добавить письмо, которое получит человек после подписки для подтверждения контакта. Если в аккаунте уже есть созданное письмо-подтверждение, то оно подставится к форме автоматически.

Теперь нужно определиться, куда будет попадать клиент после подтверждения:

на стандартную страницу переадресации с благодарностью за подписку;

перейдет по вашему URL (при условии, что ваш домен верифицирован.

Также вы можете повысить вовлеченность, добавив приветственное письмо, которое клиент получит после подтверждения, либо целую цепочку писем.

За отправку письма для подтверждения контакта или отправки Welcome-письма отвечают системные сценарии, однако, при желании, вы можете изменить их в любой момент.

Создайте "Обработку" в Webjack. В ней настраивается что/откуда получать и куда/как передавать.

Добавьте “Источник данных”

Добавьте “Источник данных”, нажмите кнопку “Добавить”


Получение заявок из форм Tilda

Посмотрите видео, в котором подробно описывается процесс настройки

Выберите Источник "Tilda, лид-формы". Нажмите "Сохранить"


Скопируйте url-адрес


Настройте сайт на Tilda.cc

Перейдите и авторизуйтесь в своем аккаунте Tilda.cc

Перейдите в нужный сайт


Выберите в меню "Формы"


Выберите пункт Webhook



Вставьте url-адрес, который вы копировали из webjack


Нажмите на кнопку "Настройки"


Установите два пункта, и нажмите кнопку "Изменить", чтобы сохранить изменения



Опубликуйте страницы вашего сайта


После этого данные из форм сайта на Tilda будут поступать в обработку Webjack.

Настройте нужные вам "Действия"

Вы можете настроить выполнение действий, которые вам необходимо. Например настроить действия: "Отправка email", "Уведомление в Telegram", "Создание лида в Битрикс24, amoCRM", "Добавление строки в Google-таблицу" и т.д.


Запустите обработку

Нажмите на кнопку "Запустить"


С этого момента данные будут обрабатываться.

Как все будет работать?

  1. В обработку будут поступать данные из настроенного вами "Источника данных"
  2. Поочередно будут выполняться все действия, которые вы настроили
  3. Все поступающие в обработку данные, а также статус и история их обработки будут отражатся в "Истории операций"


В случае возникновения каких-либо ошибок в процессе обработки, вы получите письмо-уведомление на email.

Если вы обнаружили ошибку или неточность в описании, либо что-то не понятно, напишите нам в чат на сайте. Мы внесем правки.

Для того чтобы модуль мог передавать данные с сайта в подходящие поля в RetailCRM, необходимо задать соответствие полей из карточки заказа RetailCRM полям форм на сайте. Такое соответствие настраивается на странице настроек обработчика (для каждого сайта отдельно).

Настройки по-умолчанию

В каждом новом обработчике уже преднастроены следующие поля для передачи:

Настройка полей форм

В качестве названия поля — поле карточки заказа в CRM, значение — идентификатор поля формы в Tilda. Таким образом, скриншот выше можно читать следующим образом:

  • Значение поля формы с идентификатором name передается в поле Имя в RetailCRM
  • Значение поля формы с идентификатором phone передается в поле Телефон в RetailCRM

Идентификаторы задаются в настройках полей ввода на сайте:

Настройки поля формы в Тильде

Помимо имени и телефона вы можете настроить передачу email'а, отчества, фамилии, дополнительного телефона, комментария, способа, стоимости и адреса доставки, а также любых пользовательских полей заказа (Настройки > Системные > Пользовательские поля в RetailCRM). Для этого в настройках обработчика в разделе Поля форм выберите нужное поле в выпадающем списке Добавить поле и впишите в него идентификатор.

Добавление поля

Например, если вы хотите передавать в CRM комментарий клиента, последовательность действий будет следующая:

Поле комментария в Тильде

Найдите (или создайте) на сайте поле формы с комментарием и назначьте ему идентификатор, например comment

Поле комментария в настройках обработчика

В настройках обработчика в выпадающем списке выберите Комментарий и в появившееся пустое поле впишите comment

Публикация сайта

Сохраните настройки модуля и переопубликуйте страницу сайта, на которой вносились изменения. Если вы редактировали форму корзины, переопубликуйте все страницы. Это можно сделать на странице Мои сайты.

Варианты доставки

Тип поля Варианты доставки в Тильде имеет особое значение. Если вариант указан в формате НАЗВАНИЕ = ЦЕНА, например Курьер = 300, в заказ в CRM передастся способ доставки Курьер и стоимость доставки 300.00.

Обязательное условие: тип доставки должен присутствовать в справочнике типов доставок в RetailCRM (Настройки > Справочники > Типы доставок).

Варианты доставки в Тильде

Типы доставок в RetailCRM

Продвинутый режим доставки

В настройках вариантов доставки внизу Тильда предлагает использовать продвинутый режим настроек доставки. Он позволяет интегрировать сервисы доставки напрямую в сайт, минуя CRM, делая возможным, например добавление в форму калькулятора доставки.

Продвинутый режим доставки в Тильде

При включении этого режима, данные о доставке (способ, адрес, цена, коментарий) передаются в отдельных стандартных полях, не требующих дополнительной настройки. То есть, если вы используете продвинутый режим доставки, вам не нужно добавлять в обработчике поля Адрес доставки и Способ доставки (если вы их всё же добавите, то значения, переданные в этих полях будут иметь приоритет над значениями, переданными автоматически в стандартных полях).

Читайте также: