Как настроить форму приема данных
Посмотрите видеоурок о том, как добавить настроить форму или прочитайте подробную инструкцию ниже.
Блоки с формами находятся в категории «Форма и кнопка», также несколько блоков есть в категории «Обложка».
Готовые страницы опросов (форм с множеством полей) можно найти в шаблонах, в категории «Анкеты».
Рассказываем, как настроить поля в формах, отредактировать их внешний вид и как посмотреть полученные заявки внутри интерфейса Тильды.
В одной форме может быть до 100 полей.
Поля в форме настраиваются в меню «Контент» формы во вкладке «Поля для ввода».
Заголовок поля — напишите, какую информацию нужно ввести, например, «Ваше полное имя». Этот текст выводится над полем.
Подзаголовок поля — если необходимо, расшифруйте заголовок, дайте инструкцию, например, «Укажите имя, фамилию и отчество». Этот текст выводится над полем, после заголовка.
Подсказка значения — напишите пример, как должно быть заполнено поле. Например, «Михайлов Сергей Александрович». Этот текст виден внутри поля до ввода в него данных.
Обязательно для заполнения — поставьте галочку, чтобы было невозможно было отправить пустое поле, если наличие информации в этом поле критично.
Имя переменной задается по умолчанию в зависимости от типа поля. Если сервис приема данных из форм требует определенное имя переменной, то его можно поменять. Например, свои заранее заданные имена переменных есть у Mailchimp и Bitrix24.
Как добавить форму в конструкторе сайтов Tilda
Чтобы добавить форму на страницу сайта, созданного с помощью конструктора сайтов Tilda, Вам необходимо зайти во вкладку «Получить код» в необходимой форме и скопировать код из поля «Код для вставки на сайт. Javascript (рекомендуем)»:
Далее перейдите в Tilda в режиме редактирования Вашего сайта и кликните в необходимом месте, где нужно вставить форму:
Важно. В конструкторе сайтов Tilda возможность добавлять html-блок, который используется для добавления специфичных функций, уникальных элементов, любой код, включая тэги script style, доступен только в платных тарифах.
Слева откроется библиотека блоков, опуститесь вниз и выберите раздел «Другое»:
Нажмите кнопку HTML-код:
Этот блок добавится и далее нажмите кнопку «Контент» для редактирования:
Теперь, вставьте ранее скопированный код формы, в поле «HTML КОД/КОД ВИДЖЕТА»:
Нажмите кнопку «Сохранить и закрыть»:
Добавленный код сохранится и, чтобы увидеть изменения, кликните «Опубликовать»:
После публикации форма будет уже отображена на странице сайта:
Если необходимо, чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо нажать кнопку «Контент»:
Вам необходимо добавить такой код в поле «Ссылка для кнопки»:
Если Вы форму размещаете один раз на сайте, то в конструкторе выше кнопки, необходимо выбрать добавления HTML-блока в виде:
В этом блоке нужно добавить такой код:
После добавления сохраните и нажмите кнопку «Опубликовать»:
При просмотре по клику на кнопку из тильды, откроется форма:
Если у Вас форма будет размещена на нескольких страницах сайта, то рекомендуем добавить код вызова формы в «head» сайта. Для этого Вам необходимом зайти в «Настройки сайта»:
Выберите раздел «Ещё»:
В поле «HTML-код для вставки внутрь HEAD», нажмите кнопку «Редактировать код»:
Укажите аналогичный код:
Сохраните настройки и опубликуйте.
Описанный способ выше отлично работает. Также можно в другом виде добавить отображение попапа.
Чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо выбрать добавления HTML-блока в виде «Popup HTML-код в попапе»:
Блок попапа добавится и далее нажмите кнопку «Контент» для редактирования
В Tilda попап работает таким образом:
В режиме редактирования блока попапа вставляете такой же код, только необходимо добавить такие строчки, чтобы не было дублирования:
Этот код проверяет, если попап отображается, то делается небольшая задержка и форма вставляется, а если попап скрыт, то ничего не происходит.
В поле «ССЫЛКА НА POPUP», Вы должны использовать указанную ссылку для кнопок или блока, где должен показываться этот попап. Например, добавили кнопку «Кнопка всплывающего окна», заходим в настройки этой кнопки и в поле «ССЫЛКА ДЛЯ КНОПКИ» указываем ссылку, ранее полученную:
Если будете использовать код формы несколько раз на странице, то необходимо руководствоваться этой инструкцией по добавлению кода.
Теперь, при клике на заданную кнопку, откроется попап:
Если Вы будете вставлять всплывающее окно на страницу, в виде «Ушко», то скопируйте необходимый код в нашем конструкторе:
И также добавьте HTML-код и зайдите в настройки редактирования, кликнув кнопку «Контент»:
Вставьте код в поле «HTML КОД/КОД ВИДЖЕТА», нажмите «Сохранить и закрыть» и «Опубликовать»:
На сайте появится всплывающее окно в виде «Ушко»:
Чтобы добавить всплывающее окно в виде кнопки, внешний вид которой, Вы можете настроить в нашем конструкторе, то таким же образом добавляете код с помощью HTML-блока. Аналогичным образом добавляется код и для всплывающего окна в виде автопоказа.
Стоит отметить, если Вы встраиваете несколько форм на странице, то необходимо изменить значение после ID формы: (form_
Tilda-RetailCRM
Для того чтобы модуль мог передавать данные с сайта в подходящие поля в RetailCRM, необходимо задать соответствие полей из карточки заказа RetailCRM полям форм на сайте. Такое соответствие настраивается на странице настроек обработчика (для каждого сайта отдельно).
Настройки по-умолчанию
В каждом новом обработчике уже преднастроены следующие поля для передачи:
В качестве названия поля — поле карточки заказа в CRM, значение — идентификатор поля формы в Tilda. Таким образом, скриншот выше можно читать следующим образом:
Идентификаторы задаются в настройках полей ввода на сайте:
Помимо имени и телефона вы можете настроить передачу email’а, отчества, фамилии, дополнительного телефона, комментария, способа, стоимости и адреса доставки, а также любых пользовательских полей заказа (Настройки > Системные > Пользовательские поля в RetailCRM). Для этого в настройках обработчика в разделе Поля форм выберите нужное поле в выпадающем списке Добавить поле и впишите в него идентификатор.
Добавление поля
Например, если вы хотите передавать в CRM комментарий клиента, последовательность действий будет следующая:
Найдите (или создайте) на сайте поле формы с комментарием и назначьте ему идентификатор, например comment 
В настройках обработчика в выпадающем списке выберите Комментарий и в появившееся пустое поле впишите comment 
Сохраните настройки модуля и переопубликуйте страницу сайта, на которой вносились изменения. Если вы редактировали форму корзины, переопубликуйте все страницы. Это можно сделать на странице Мои сайты. 
Варианты доставки
Тип поля Варианты доставки в Тильде имеет особое значение. Если вариант указан в формате НАЗВАНИЕ = ЦЕНА, например Курьер = 300, в заказ в CRM передастся способ доставки Курьер и стоимость доставки 300.00.
Обязательное условие: тип доставки должен присутствовать в справочнике типов доставок в RetailCRM (Настройки > Справочники > Типы доставок).
Продвинутый режим доставки
В настройках вариантов доставки внизу Тильда предлагает использовать продвинутый режим настроек доставки. Он позволяет интегрировать сервисы доставки напрямую в сайт, минуя CRM, делая возможным, например добавление в форму калькулятора доставки.
При включении этого режима, данные о доставке (способ, адрес, цена, коментарий) передаются в отдельных стандартных полях, не требующих дополнительной настройки. То есть, если вы используете продвинутый режим доставки, вам не нужно добавлять в обработчике поля Адрес доставки и Способ доставки (если вы их всё же добавите, то значения, переданные в этих полях будут иметь приоритет над значениями, переданными автоматически в стандартных полях).
Экспортированный с Тильды сайт: как вернуть формы?
Тильда, по сравнению с другими конструкторами сайтов, даёт простор для работы с фидбэком: 10-ки тонко настраиваемых форм, интеграции со всем: от мессенджеров и почты до сервисов по рассылке и CRM. Формы в подвале, обложках, поп-апах, отправка целей, внутренняя Tilda-CRM.
Плохо лишь одно — это изобилие развалится при экспорте Тильдо-сайта на сервер, чтобы перестать платить минимум 6 тысяч в год.
Для многих, увеличение расходов на ТП-Тильды — лишняя трата денег. Но при экспорте готового настроенного сайта из Тильды на хостинг:
Виджеты Тильды
В самой Тильде сделать обратную связь довольно просто:
Также здесь находится URL уникальной страницы Тильды, просмотр которой нужно задать в Метрике и Google Analytics как достижение отправки формы. В «Контенте» блока формы настраиваются шапка, текст, поля, плейсхолдеры, подключатся интеграции. Сложностей обычно это не вызывает ни у кого.
Плюсы и минусы стандартных форм ТильдыПлюсы:
Минус один, но очень жирный. Нельзя выгрузить сайт с Тильды на хостинг. В противном случае функции пропадут.
Формы Яндекс и Гугл
Многие в поисках спасения обращаются к самому очевидному варианту — сервисы для создания форм от Яндекса и Гугла. Оба варианта реализуются вставкой готового кода через блок тильды «HTML-код».
Яндекс.Форма на Тильде
Создадим простой фидбэк через сервис Яндекса:
Плюсы:
Минусы:
Гугл Формы + Тильда
Также как и Яндекс.Формы, сервис google.forms.com больше подходит для создания анкет на сайтах, но можно изловчится и сделать подобие обратной связи.
Но в этом случае данные нельзя получить даже на почту — только обрабатывать внутри сервиса.
Написать форму с нуля
Обратную связь на выгруженном сайте можно настроить вручную. Это под силу человеку с базовыми знаниями безопасного программирования, который владеет PHP, jQuery, AJAX. Чисто технически, форма на сайте уже есть. Понадобится только заново настроить обработку отправляемых данных, уведомления на почту, вебхуки для интеграций, отправку без перезагрузки и достижения целей в метрике.
К сожалению, в рамках этой статьи разобрать всё многообразие задач со всеми блоками форм тильды не получится точно (полная инструкция есть здесь), но поделится простым рецептом восстановления работы экспортированной формы мы можем:
Плюсы:
Минусы:
Платные и условно бесплатные сервисы
Сервисов для конструирования форм и обработки заявок 10-ки, если не сотни. Почти все они условно-бесплатны, то есть имеют ограниченный функционал на бесплатных тарифах.
Плюсы бесплатных версий:
Пожалуй, на этом все. Функции бесплатных сервисов ограничены. Доступ к платным версиям обычно по подписке. Стоит это от пары сотен до нескольких тысяч в месяц. Естественно, бесплатные тарифы подразумевают много ограничений:
Среди всего многообразия платформ привлекает QForm24 (это мы). Во-первых, сервис полностью бесплатный, и не перестанет им быть — дополнительный платный функционал только в разработке и не будет обязательным.
Пример жёстких ограничений на популярных конструкторах форм
Плюсы:
Tilda — удобный конструктор. Но пользоваться ей только ради работы форм обратной связи не слишком выгодно. Если у вас не получается или нет возможности реализовать весь функционал самостоятельно, обратите внимание на QForm24.com — он полностью бесплатен и поможет восстановить форму, оставшуюся без стандартного обработчика Тильды.
Как подключить форму на тильде
Настройте автоматическое создание файлов через форму на вашем сайте в Тильде. Ваши посетители смогут указать свои ФИО и другие данные и получить готовый файл. При необходимости, файл может быть отправлен на электронную почту получателя.
С чего начать?
Вам нужно 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[] не будет, то данные буду взяты с первого.
Нужна помощь?
Напишите нам в техническую поддержку или через чат. Мы с радостью поможем вам!