tilda forms что это
Экспортированный с Тильды сайт: как вернуть формы?
Тильда, по сравнению с другими конструкторами сайтов, даёт простор для работы с фидбэком: 10-ки тонко настраиваемых форм, интеграции со всем: от мессенджеров и почты до сервисов по рассылке и CRM. Формы в подвале, обложках, поп-апах, отправка целей, внутренняя Tilda-CRM.
Плохо лишь одно — это изобилие развалится при экспорте Тильдо-сайта на сервер, чтобы перестать платить минимум 6 тысяч в год.
Для многих, увеличение расходов на ТП-Тильды — лишняя трата денег. Но при экспорте готового настроенного сайта из Тильды на хостинг:
Виджеты Тильды
В самой Тильде сделать обратную связь довольно просто:
Также здесь находится URL уникальной страницы Тильды, просмотр которой нужно задать в Метрике и Google Analytics как достижение отправки формы. В «Контенте» блока формы настраиваются шапка, текст, поля, плейсхолдеры, подключатся интеграции. Сложностей обычно это не вызывает ни у кого.
Плюсы и минусы стандартных форм ТильдыПлюсы:
Минус один, но очень жирный. Нельзя выгрузить сайт с Тильды на хостинг. В противном случае функции пропадут.
Формы Яндекс и Гугл
Многие в поисках спасения обращаются к самому очевидному варианту — сервисы для создания форм от Яндекса и Гугла. Оба варианта реализуются вставкой готового кода через блок тильды «HTML-код».
Яндекс.Форма на Тильде
Создадим простой фидбэк через сервис Яндекса:
Плюсы:
Минусы:
Гугл Формы + Тильда
Также как и Яндекс.Формы, сервис google.forms.com больше подходит для создания анкет на сайтах, но можно изловчится и сделать подобие обратной связи.
Но в этом случае данные нельзя получить даже на почту — только обрабатывать внутри сервиса.
Написать форму с нуля
Обратную связь на выгруженном сайте можно настроить вручную. Это под силу человеку с базовыми знаниями безопасного программирования, который владеет PHP, jQuery, AJAX. Чисто технически, форма на сайте уже есть. Понадобится только заново настроить обработку отправляемых данных, уведомления на почту, вебхуки для интеграций, отправку без перезагрузки и достижения целей в метрике.
К сожалению, в рамках этой статьи разобрать всё многообразие задач со всеми блоками форм тильды не получится точно (полная инструкция есть здесь), но поделится простым рецептом восстановления работы экспортированной формы мы можем:
Плюсы:
Минусы:
Платные и условно бесплатные сервисы
Сервисов для конструирования форм и обработки заявок 10-ки, если не сотни. Почти все они условно-бесплатны, то есть имеют ограниченный функционал на бесплатных тарифах.
Плюсы бесплатных версий:
Пожалуй, на этом все. Функции бесплатных сервисов ограничены. Доступ к платным версиям обычно по подписке. Стоит это от пары сотен до нескольких тысяч в месяц. Естественно, бесплатные тарифы подразумевают много ограничений:
Среди всего многообразия платформ привлекает QForm24 (это мы). Во-первых, сервис полностью бесплатный, и не перестанет им быть — дополнительный платный функционал только в разработке и не будет обязательным.
Пример жёстких ограничений на популярных конструкторах форм
Плюсы:
Tilda — удобный конструктор. Но пользоваться ей только ради работы форм обратной связи не слишком выгодно. Если у вас не получается или нет возможности реализовать весь функционал самостоятельно, обратите внимание на QForm24.com — он полностью бесплатен и поможет восстановить форму, оставшуюся без стандартного обработчика Тильды.
Общая цель отправки формы на Tilda
Небольшая заметка о том, как настроить общую цель на отправку всех форм для сайтов на конструкторе Tilda в Яндекс.Метрике и Google Analytics.
Некоторое время назад я публиковал подробный видеоурок на своем канале YouTube по настройке целей в Яндекс.Метрике и Google Analytics для сайтов на Tilda с помощью Google Tag Manager. В нем было затронуто много тем, включая установку счетчиков веб-аналитики и настройку различных отслеживаний для посадочной страницы и интернет-магазина.
Настройка цели-события из события в Метрике и Аналитике
В способе в аналитике сначала фиксируется событие, а потом из события мы создаем цель-событие (конверсию). Из видео вы знаете, что Tilda передает данные в системы аналитики на основе просмотра страниц. Когда пользователь совершает какое-либо действие на странице, создается виртуальная страница. В Тильде заложены определенные настройки, которые позволяют отслеживать открытие попапов, клики по кнопкам и отправку форм. Адрес виртуальной страницы можно посмотреть в настройках блока:
Пример идентификатора блока в Tilda
Примеры того, как выглядят адреса виртуальных страниц в Tilda:
Подробнее об отслеживании целей в Tilda читайте в официальной документации.
Нас интересует именно конструкция tilda/form********/submitted, поскольку она отвечает за отслеживание отправки формы. Если у вас на сайте большое количество форм, то отслеживая их по отдельности, вам необходимо создать 1 цель на каждую форму. В результате вы можете получить большое количество различных целей:
При такой настройке количество заявок будет «размыто» по каждой цели, что не даст автоматическим стратегиям того же Яндекса и Google выйти на полную мощность в силу ограниченного количества данных, поскольку оптимизировать рекламные кампании пока можно только по одной ключевой цели. И в дальнейшем вам придется сводить суммарное количество обращений вручную.
Вы можете поступить и так и так:
Сделать это можно с использованием регулярного выражения и несложной конструкции:
How to Set Up Data Capture Forms
You can find blocks with forms in the «Form and button» as well as in the «Cover» categories in the Block Library.
There are also lots of ready-made form templates with multiple fields in the «Forms» template category.
Read this guide to learn how to add and customize form input fields and view leads on Tilda.
Each form can have an unlimited number of fields.
You can customize form input fields in the Content panel of the block under the «Input fields» tab.
Title. Specify which information is required, for example, «Your name.» This text will appear above the field.
Subtitle. If necessary, add a description or instructions, for example, «Enter your first name and surname.» This text will appear above the field and under the title.
Placeholder. Give an example of how the field should be filled. For instance, «John Dawson.» This text is visible inside the field before it’s filled out.
Required field. Select this checkbox to make the field required. Visitors won’t be able to submit the form without filling in this field.
A variable name is set by default, depending on the field type. If data capture services require a specific name of your variable, simply change it. For example, Mailchimp and Bitrix24 both have pre-set variables.
Tilda forms что это
Настройте автоматическое создание файлов через форму на вашем сайте в Тильде. Ваши посетители смогут указать свои ФИО и другие данные и получить готовый файл. При необходимости, файл может быть отправлен на электронную почту получателя.
С чего начать?
Вам нужно 1) создать или загрузить шаблон, 2) создать документ, заполнить его. В том месте, где будут данные подставляться из формы поставьте строку для замены, например %фио или %баллы. Если вы хотите дополнительно отправлять письмо на email 3) напишите текст письма (в шаблонах писем).
В конечном итоге у вас должны быть:
Документ в ГрамотаДеле c переменной %name
Создание формы в Тильде
Чтобы отправлять запросы на создания файлов в ГрамотаДеле, вам нужно создать специальную форму на своём сайте. Эта форма может располагаться как в Личном кабинете, так и на публичной части вашего сайта. Добавьте любую форму, доступную в каталоге.
Настройки формы
Нажмте на кнопку «Контент» в левом углу формы. Два раза кликните по заголовку «Приём данных из формы», появится дополнительный переключатель «Свой скрипт для принятия данных», выберите его. В поле для ввода вставьте следующий адрес:
https://gramotadel.ru/api/v1/tilda-create/
Отметьте, что вы хотите отправлять данные без перезагрузки формы (AJAX).
Поля для ввода
В документе ГрамотаДела у вас должна быть хотя бы одна переменная для замены, например %name или %course. Переменная должна быть написана латиницей. Кирилические %фио или %класс использовать нельзя.
Добавление поля mask_name, которое соответствует %name в документе
Если необходимо отправлять готовый файл по электронной почте, и форма находится в публичном доступе (не в Личном кабинете), то добавьте поле E-mail для ввода адреса электронной почты. В этом случае имя переменной будет «mask_email». Для отправки писем на несколько адресов укажите их через запятую или пробел. При этом статус отправки в Диске будет отображаться по первому адресу.
Добавление поля mask_email, которое соответствует %email в документе
Таких полей для ввода и переменных в документе может быть любое количество. Вы можете запрашивать любые данные у посетителя, чтобы затем их нанести на готовый файл.
Скрытые поля формы
Затем нужно создать несколько срытытых полей. Они обеспечивают идентификацию формы, указывают на то, какой документ использовать, в какую папку в Диске сохранять файл и так далее.
Обазятельные поля формы помечены звёздочкой.
Таким образом в форме должны быть два обязательных скрытых поля. Это поле Secure.
Скрытое поле Secure. Значение поля нужно взять в настройках.
Кроме того, если необходимо отправлять файл по электронной почте, то нужно указать ID письма.
Если файл нужно добавить в определённую папку на Диске, то нужно указать ID папки.
Настройки в ГрамотаДеле
Перед тем, как проверить работу формы нужно сделать ряд настроек в ГрамотаДеле.
Для этого открываем раздел API ⇒ Tilda
Разрешить принимать запросы Включите. Если переключатель выключен, то форма не будет работать.
Адрес сайта Обязательно укажите адрес сайта, на котором размещена форма. Нужно указать только адрес, с протоколом, но без слеша. Например: https://yoursite.ru
Если у вас несколько сайтов с формами, то укажите их через пробел.
Остальные настройки касаются размещения формы в Личном кабинете и рассмотрены ниже. Сохраните изменения.
Работа формы
Теперь можно окрыть опубликованную страницу и проверить работу формы. Будет создан файл и выведен во всплывающем окне для скачивания. Если этого не произошло проверьте адрес сайта в настройках ГрамотаДела, а так же корректность secure и doc_id. В окне скачивания посетителю будет предложено сделать заказ печати в сервисе печати «КС Принт». Это предложение можно выключить в Настройки ⇒ Печати.
Использование данных из Личного кабинета
Если вы вставляете форму в Личном кабинете, то вы можете использовать имя и адрес пользователя из ЛК.
Отправка имени пользователя аккаунта
Если необходимо, вы можете отпралять имя пользователя из данных его аккаунта и не просить его вводить свое ФИО в поле для ввода. Для этого, создайте скрытое поле с именем поля mask_name (или другой, соответствующей имени в вашем документе), а в значении напишите ma_name. В этом случае в это поле имя пользователя подставится автоматически из ЛК.
Создание файла по одной кнопке
Вы можете настроить создание файла кликом по кнопке, без необходимости заполнять поля (например, когда имя вы получете из данных аккаунта). Т.к. Тильда не умеет отправлять форму только со скрытыми полями, вы можете создать, например, чекбокс с согласием на обработку данных.
Один документ = одно заполнение
По желанию, вы можете ограничить заполнение формы одним разом. Пользователю, который уже заполнял форму при посещении этой же страницы будет предложено скачать готовый файл.
Для включения этой возможности откройте в Тильде настройки страницы, вкладку «Дополнительно», код в HEAD и вставьте код со страницы интеграции Тильды в ГрамотаДеле. Включите соответствующий параметр в настройках. Теперь, если пользователь уже заполнял форму с этим doc_id, то ему будет предложено скачать этот файл. На сайте вы можете разместить несколько форм с разными doc_id на одной или разных страницах сайта.
Запрет на изменение адреса электронной почты
Идентификация посетителя Личного кабинета в ГрамотаДеле осуществляется по его email. Если он изменит свой email, то он сможет снова заполнить формы, которые уже заполнял. Чтобы не допустить этого, вы можете запретить пользователям изменять свой email. Для этого в ГрамотаДеле поставьте соответствующий переключатель. Затем на каждую страницу Личного кабинета добавьте в HEAD файл стилей из интеграции ГрамотаДела. Этот файл должен быть подключён в HEAD на каждой странице Личного кабинета. Кроме того, вы должны создать свою индексную страницу Личного кабинета.
Мои сертификаты
Для вывода моих сертификатов создайте форму, в которой, как указано выше укажите «Свой скрипт для принятия данных». Затем добавьте скрытые поля secure и doc_id. В последнее поле укажите значение all. Не забудьте добавить в HEAD скрипт и стили для инциализации. При открытии этой странице в Личном кабинете посетитель увидит на месте формы список всех сертификатов с возможностью скачать их.
Автоматические отчёты в Google Таблице
Вы настроить отправку отчётов о созданных файлах в Google Таблицу. Информация о файлах, в том числе статус отправки, будет сохраняться в вашей таблице.
Посмотрите раздел документации Отправка автоматических отчётов в Google Таблицы.
Создание нескольких файлов в одном запросе
В одной форме можно отправить запрос на создание нескольких файлов из разных документов. С помощью такого запроса можно создать несколько файлов, например, используя шаблоны на русском и английском языке.
Чтобы создать такую форму, просто к имени поля doc_id добавьте две квадратные скобки, чтобы получилось doc_id[]. Затем добавьте ещё одно скрытое поле doc_id[], но со значением ID другого нужного документа в ГрамотаДеле. Таких документов может быть любое количество. Другие поля, такие как genuine, email_send, mail_id, storage, yadisk тоже могут быть отправлены подобным образом.
Скрытое поле doc_id[]. Таких полей может быть несколько.
Пример: необходимо создать два файла из разных документов и положить их в разные папки на Диске. Для этого необходимо создать два поля doc_id[] и два поля folder_id[]. Важно, все поля, имеющие несколько значений шли в одинаковом порядке. Т.е. первому doc_id[] будет соответствовать первый folder_id[], второму doc_id[] второй storage[]. Е сли второго folder_id[] не будет, то данные буду взяты с первого.
Нужна помощь?
Напишите нам в техническую поддержку или через чат. Мы с радостью поможем вам!
Конструктор сайтов Tilda: подробный обзор и инструкция по настройке интеграций
Хотите сайт для бизнеса, но не умеете программировать? Попробуйте сделать его в Tilda. В этом конструкторе можно быстро собрать лендинг, блог и даже интернет-магазин без каких-либо специальных навыков. В данном материале мы расскажем об основных функциях платформы, а также о том, как сделать хороший результат еще лучше благодаря интеграциям с другими сервисами.
Что такое конструктор «Тильда» и для чего он нужен
Tilda — это онлайн-платформа, предназначенная для создания сайтов без помощи программистов и дизайнеров. Собрать и запустить простой сайт можно всего за несколько минут. О хостинге беспокоиться не нужно: все страницы и данные будут храниться на серверах системы.
Tilda работает как визуальный конструктор. Пользователь собирает сайт из готовых блоков и может настраивать их функциональность и внешний вид. Возиться с кодом не приходится: для управления конструктором достаточно нажимать на кнопки и регулировать ползунки. Простой интерфейс с подсказками помогает быстро разобраться в системе. При необходимости можно воспользоваться подробной русскоязычной справкой.
Tilda подходит для создания разных типов сайтов. Среди них:
Конструктор работает по подписке: доступно три тарифных плана. Первый позволяет создать один сайт в «Тильда» бесплатно, но открывает доступ только к базовым блокам. Второй тариф платный и предлагает полную коллекцию блоков плюс разные дополнительные функции, однако по-прежнему можно создать лишь один сайт. Третий план самый дорогой, зато в нем доступны все блоки и функции, а также возможность собрать до пяти сайтов.
Основные возможности Tilda
Блоки Tilda. Как мы уже сказали, пользователь собирает сайт из блоков. Каждый из них отображает на странице определенный элемент: фрагмент текста, форму для ввода данных, иллюстрацию, видео, отзывы, контакты и так далее. Добавив блок, можно настроить его расположение на странице, внутренний контент, функции и внешний вид.
Шаблоны. Необязательно собирать сайт с нуля. В конструкторе есть обширный каталог шаблонов для самых разных проектов: от цветочного магазина до персональной страницы тренера по фитнесу. Шаблон представляет собой готовый набор блоков, который одинаково хорошо отображается как на компьютерах, так и на мобильных устройствах. Контент и оформление можно отредактировать — получится уникальный сайт.
Инструменты для интернет-продаж. В конструкторе можно создать сайт для приема денег через популярные платежные системы. Такой вариант подойдет, например, для заработка на вебинарах. Более того, система позволяет собрать полноценный магазин с карточками товаров. Заказы будут отображаться во встроенной CRM прямо в личном кабинете Tilda.
Настройки домена. Система позволяет бесплатно зарегистрировать домен вида «имя-сайта.tilda.ws». На платных тарифах к сайтам также можно подключать собственные домены вроде «имя-сайта.com». При этом первый год использования домена входит в подписку, далее его придется оплачивать отдельно.
SEO-инструменты. Вы можете оптимизировать сайты для продвижения в поисковых системах. Tilda позволяет прописывать мета-теги, выбирать теги заголовков, настраивать URL страниц, а также проверять отображение в поисковиках с помощью интеграций с Google Search и «Яндекс.Вебмастер». При желании сайт можно сделать невидимым для поисковых систем.
Аналитика. Вы можете следить за посещаемостью и поведением пользователей на сайте. Конструктор отображает такие показатели, как число посетителей и просмотров, конверсии, количество заходов с мобильных устройств, процент дочитывания страниц, число заявок и так далее. Для более подробной аналитики можно подключать сторонние системы Google Analytics и «Яндекс.Метрику».
Конструктор писем. В Tilda можно собирать не только сайты, но и письма для почтовых рассылок. Принцип тот же: выбираете шаблон, редактируете блоки, сохраняете. Система позволяет отправлять письма прямо из личного кабинета, но для этого к нему нужно подключить один из сервисов email-рассылок: MailChimp, UniSender или SendGrid.
Редактор Zero Block. Если шаблонов и стандартных инструментов для изменения блоков не хватит для ваших задач, можете воспользоваться продвинутым редактором Zero Block. Он предоставляет почти неограниченную свободу для управления внешним видом страниц. С его помощью можно редактировать текст, картинки и прочие элементы дизайна с точностью до пикселя. Это позволит вам создать по-настоящему уникальный сайт.
Интеграции Tilda с другими системами
Как вы уже знаете, Tilda из коробки поддерживает интеграции с различными сервисами: платежными системами, аналитическими инструментами, сервисами email-рассылок и так далее.
Но этот список ограничен парой десятков сервисов и среди них может не оказаться инструмента, который необходим именно вам. В таком случае выручит онлайн-коннектор ApiX-Drive. Это платформа для быстрого создания интеграций между разными системами. С ее помощью можно подключать к Tilda огромное количество дополнительных инструментов. Перечислим некоторые из них.
Кроме того, коннектор поддерживает многоуровневые интеграции. То есть вы можете выбрать Tilda как источник данных и подключить к нему несколько сервисов-приемников: к примеру, CRM, систему SMS-рассылок и мессенджер. В таком случае данные из форм будут автоматически передаваться в каждый подключенный сервис.
Например, когда посетитель отправляет заказ через форму, тот попадает в CRM, затем клиент получает подтверждение по SMS, а вы — уведомление о новом заказе в мессенджере. Все перечисленные действия коннектор выполняет на автомате.
Как настроить интеграцию: на примере Tilda и Google Sheets
Для работы с коннектором не нужны навыки программирования. Чтобы создать интеграцию, достаточно подключить аккаунты Tilda и другого сервиса к сайту ApiX-Drive и настроить между ними связь. На это потребуется около 15 минут.
Для наглядности разберем процесс по шагам. В качестве примера подключим к Tilda Google Sheets, чтобы данные из форм автоматически попадали в таблицу. Это позволит нам вести учет всех заказов в одной удобной системе.
Итак, регистрируемся на сайте ApiX-Drive. Заходим в личный кабинет и кликаем «Создать связь».
После этого приступаем к подключению.
Подключение формы Tilda
Выбираем Tilda в качестве системы-источника данных.
Выбираем действие, которое должен совершать коннектор: «Получить данные из форм».
Кликаем «Подключить аккаунт «Tilda».
Копируем URL для приема данных — он поможет подключить нужную форму.
Открываем в новой вкладке личный кабинет Tilda. Заходим в настройки сайта, который хотим подключить к Google Sheets, открываем раздел «Формы» и выбираем Webhook. Затем вставляем только что скопированный URL и нажимаем «Добавить».
Добавляем приемщик данных ко всем формам.
Нажимаем «Опубликовать все страницы», чтобы изменения вступили в силу.
Открываем наш сайт и отправляем через форму любые данные.
Возвращаемся к настройке ApiX-Drive. При необходимости добавляем условия фильтрации. С их помощью коннектор способен передавать только те заказы, которые содержат нужные ключевые слова или другие параметры. Например, таким образом можно настроить фильтр на передачу заказов только определенной товарной категории.
На экране появятся данные, которые мы отправили в качестве тестового заказа. Переходим к следующему этапу.
Подключение таблицы Google Sheets
Кликаем «Начать настройку Приема Данных».
Выбираем Google Sheets в качестве приемника данных.
Выбираем действие, которое должен выполнять коннектор с загруженными данными: «Добавить строчку».
Подключаем аккаунт Google Sheets.
Выбираем таблицу (файл) и лист, в которые ApiX-Drive будет вставлять заказы. Затем выбираем, какие именно данные по каждому заказу будут попадать в Google Sheets. Для этого кликаем по нужным полям и выбираем подходящие типы данных. Каждое поле соответствует колонке в нашей таблице. Лишние поля оставляем пустыми.
Проверяем пример данных, которые будут передаваться по каждому заказу. Если надо что-то изменить, кликаем «Редактировать» и вносим правки. Если все правильно, нажимаем «Далее».
Включаем обновление, чтобы разрешить передачу данных.
Кликаем по шестеренке и выбираем подходящий интервал передачи данных. Чем он меньше, тем быстрее данные из форм будут попадать в таблицу.
Примерно так переданные заказы будут отображаться в Google Sheets:
На этом все. ApiX-Drive начнет передавать данные в соответствии с заданными параметрами.