как сделать кастомную форму в тильде

Как настроить форму приема данных

Посмотрите видеоурок о том, как добавить настроить форму или прочитайте подробную инструкцию ниже.

Блоки с формами находятся в категории «Форма и кнопка», также несколько блоков есть в категории «Обложка».

Готовые страницы опросов (форм с множеством полей) можно найти в шаблонах, в категории «Анкеты».

Рассказываем, как настроить поля в формах, отредактировать их внешний вид и как посмотреть полученные заявки внутри интерфейса Тильды.

В одной форме может быть до 100 полей.

Поля в форме настраиваются в меню «Контент» формы во вкладке «Поля для ввода».

Заголовок поля — напишите, какую информацию нужно ввести, например, «Ваше полное имя». Этот текст выводится над полем.

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

Подсказка значения — напишите пример, как должно быть заполнено поле. Например, «Михайлов Сергей Александрович». Этот текст виден внутри поля до ввода в него данных.

Обязательно для заполнения — поставьте галочку, чтобы было невозможно было отправить пустое поле, если наличие информации в этом поле критично.

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

Источник

Экспортированный с Тильды сайт: как вернуть формы?

Тильда, по сравнению с другими конструкторами сайтов, даёт простор для работы с фидбэком: 10-ки тонко настраиваемых форм, интеграции со всем: от мессенджеров и почты до сервисов по рассылке и CRM. Формы в подвале, обложках, поп-апах, отправка целей, внутренняя Tilda-CRM.

Плохо лишь одно — это изобилие развалится при экспорте Тильдо-сайта на сервер, чтобы перестать платить минимум 6 тысяч в год.

Для многих, увеличение расходов на ТП-Тильды — лишняя трата денег. Но при экспорте готового настроенного сайта из Тильды на хостинг:

Виджеты Тильды

В самой Тильде сделать обратную связь довольно просто:

Также здесь находится URL уникальной страницы Тильды, просмотр которой нужно задать в Метрике и Google Analytics как достижение отправки формы. В «Контенте» блока формы настраиваются шапка, текст, поля, плейсхолдеры, подключатся интеграции. Сложностей обычно это не вызывает ни у кого.

Плюсы и минусы стандартных форм ТильдыПлюсы:

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

Формы Яндекс и Гугл

Многие в поисках спасения обращаются к самому очевидному варианту — сервисы для создания форм от Яндекса и Гугла. Оба варианта реализуются вставкой готового кода через блок тильды «HTML-код».

Яндекс.Форма на Тильде

Создадим простой фидбэк через сервис Яндекса:

Плюсы:

Минусы:

Гугл Формы + Тильда

Также как и Яндекс.Формы, сервис google.forms.com больше подходит для создания анкет на сайтах, но можно изловчится и сделать подобие обратной связи.

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

Написать форму с нуля

Обратную связь на выгруженном сайте можно настроить вручную. Это под силу человеку с базовыми знаниями безопасного программирования, который владеет PHP, jQuery, AJAX. Чисто технически, форма на сайте уже есть. Понадобится только заново настроить обработку отправляемых данных, уведомления на почту, вебхуки для интеграций, отправку без перезагрузки и достижения целей в метрике.

К сожалению, в рамках этой статьи разобрать всё многообразие задач со всеми блоками форм тильды не получится точно (полная инструкция есть здесь), но поделится простым рецептом восстановления работы экспортированной формы мы можем:

Плюсы:

Минусы:

Платные и условно бесплатные сервисы

Сервисов для конструирования форм и обработки заявок 10-ки, если не сотни. Почти все они условно-бесплатны, то есть имеют ограниченный функционал на бесплатных тарифах.

Плюсы бесплатных версий:

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

Среди всего многообразия платформ привлекает QForm24 (это мы). Во-первых, сервис полностью бесплатный, и не перестанет им быть — дополнительный платный функционал только в разработке и не будет обязательным.

Пример жёстких ограничений на популярных конструкторах форм

Плюсы:

Tilda — удобный конструктор. Но пользоваться ей только ради работы форм обратной связи не слишком выгодно. Если у вас не получается или нет возможности реализовать весь функционал самостоятельно, обратите внимание на QForm24.com — он полностью бесплатен и поможет восстановить форму, оставшуюся без стандартного обработчика Тильды.

Источник

Как добавить форму в конструкторе сайтов 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__X). Более подробную информацию найдёте здесь.

Источник

Создаем пошаговый лендинг на Tilda через переменные [Инструкция]

Немного покопавшись в интерфейсе, нашел способ создавать пошаговые лендинги на Тильде в рамках одной страницы (чтобы не плодить по 10 одинаковых страниц). Получается примерно вот такая штука. Кому интересно — держите инструкцию: )

Поскольку на тильде есть ограничение в 500 страниц, мне не слишком хотелось создавать по 10 страниц и связывать их кнопкой перехода. Мало того, что это заняло бы приличную часть ресурсов (ведь количество страниц ограничено), дык еще и путался бы постоянно. Да и хотелось потенциально улучшить поведенческие факторы для SEO в рамках одной страницы, а не создавать десяток обрубков.

Чтобы все было в рамках одного URL — логично предположить, что все блоки, по которым будет гулять пользователь — должны находится в рамках одной страницы. Я использовал блок BF303 и в настройках блока указал высоту «100vh» — чтобы он занимал всю высоту экрана пользователя. Ниже на скрине видно, что экран 2 идет сразу после экрана 1, никаких разделителей или еще чего-то такого.

Таким образом в рамках одной страницы создаем все шаги по очереди.

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

После того, как шаги настроены, можно начинать настраивать саму «пошаговость».

Но для начала поясню, что такое переменные. Переменные — это специальный параметр (get, если по научному) в ссылке, при помощи которого можно отслеживать статистику, подменять контент, работать с базами данных и вообще куча всего. Состоит из двух частей — ключа и значения. Я не программист, поэтому мог криво объяснить, но самый популярный среди маркетологов get-параметр — это UTM.
?utm_source=google — это переменная с ключом «utm_source» и значением «google».
Добавляется он вот так, после знака вопроса или знака &:

Надеюсь понятно объяснил, если нет — спрашивайте в комментах: )

Итак, вернемся к Тильде. Надо добавить возможность заменять при помощи переменных контент на нашем лендинге.

Для этого в самый низ нашей заготовки добавляем блок Т809 (Мультилендинг: скрыть/показать блок по параметру в URL). Он находится в разделе «Другое», практически в самом низу.

Открываем его настройки и указываем следующие данные.

Источник

Топ-15 инструментов Тильды для интернет-маркетолога в 2021 году

Разобрались в актуальной базе инструментов Тильды для разработки и развития digital-проектов и выделили топ-15, которые, на наш взгляд, особенно полезны с точки зрения продвижения сайта.

Мы активно применяем их в работе и с крупными клиентами, такими как Проектная дирекция Минстроя России, ГК «Современные транспортные технологии», TeleparkTV и другими.

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

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

Первое, что должен уметь делать интернет-маркетолог, — организовать сбор контактных данных целевых пользователей на сайте. На Тильде это можно сделать с помощью классической стандартной, пошаговой формы или формы с калькулятором. Посетители сайта вводят информацию о себе в поля формы, а вы получаете её в сервисе приема данных.

С Тильдой интегрировано более 20 сервисов приема данных: E-mail, Google Таблицы, MailChimp, Google Forms, SendGrid, GetResponse, UniSender, SendinBlue, Mailerlite, SendPulse, AmoCRM, Мегаплан, Pipedrive, Zoho CRM, Hubspot, Битрикс24, Telegram, Slack, Trello, Zapier.

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

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

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

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

Вы можете реализовать на сайте:

Добавьте на страницу стандартный виджет обратной связи из библиотеки Тильды: обратный звонок, отправку сообщения, форму подписки. Или используйте один из сервисов, интегрированных в конструктор: Jivosite, Callbackhunter, Chatra.io и YClients.

Если вы привыкли работать с другим сервисом, добавьте его на сайт с помощью функции вставки html-кода.

В Тильде есть собственная система для работы с заявками — Tilda CRM. С ее помощью можно управлять данными небольшого бизнеса прямо на сайте. Также вы можете подключить внешнюю CRM — AmoCRM, Мегаплан, Битрикс24, Pipedrive, Zoho CRM и Hubspot уже интегрированы в Тильду, нужно только настроить передачу данных.

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

Изучайте показатели сайта, не покидая аккаунта Тильды. В конструктор встроен собственный счетчик, который отслеживает статистику сайта и выводит основные данные, необходимые для принятия маркетинговых решений. Чтобы видеть перед собой полную картину происходящего на сайте, подключите Яндекс.Метрику и Google Analytics — сделать это можно в несколько кликов.

Показатели во внутреннем сервисе статистики:

Для ведения блога или ленты новостей на сайте в Тильде доступен специальный модуль — «Потоки». Он позволяет «обойти» ограничение конструктора в 500 страниц на 1 сайт и разместить сколько угодно постов с уникальным URL (техническое ограничение — 5 000 постов на 1 поток, но потоков может быть несколько).

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

Кроме удобного редактора модуль дает следующие возможности:

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

Встроенный конструктор писем делает Тильду удобной для email-маркетинга. Вы можете собирать письма самостоятельно, без помощи дизайнера и frontend-разработчика. Так же, как и в случае со страницами сайта, вам доступна Библиотека блоков, из которых вы можете собрать подходящее письмо. При желании можно воспользоваться готовым шаблоном — вариантов очень много.

Тильда позволяет быстро настроить интеграцию с сервисами рассылок Mailchimp, SendGrid, GetResponse, UniSender, SendinBlue, Mailerlite, SendPulse и отправлять письма подписчикам, не покидая личного кабинета. Вы можете использовать и любой другой сервис — письмо из Тильды легко выгружается в виде html-кода.

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

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

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

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

TimePad — сервис для организации мероприятий и продажи электронных билетов. Тильда позволяет буквально в пару кликов встроить на сайт форму TimePad. Вам достаточно создать событие на сервисе и добавить виджет мероприятия на сайт, выбрав подходящий блок в Библиотеке Тильды. Найти его можно в категории «Другое».

Для командной работы над проектом Тильда предусмотрела функционал мультидоступа «Сотрудники». Вы можете открыть полный или ограниченный доступ к редактированию сайта для пользователей других аккаунтов Тильды. Это особенно удобно для СМИ, информационных порталов, корпоративных блогов и интернет-магазинов. Вам не придется передавать доступы к своему аккаунту всем сотрудникам, которые отвечают за наполнение сайта контентом, и беспокоиться, что они что-то поменяют в настройках. Благодаря этой функции вы можете предоставить ответственным лицам доступ исключительно к работе с контентом.

Возможность платная, стоимость — от 360 руб. / месяц.

Создавайте уникальные URL страниц для рекламных кампаний в поисковых системах и социальных сетях с помощью генератора utm-меток. Благодаря UTM-меткам вы получите подробную информацию об источниках трафика по каждой ссылке отдельно и сможете более детально анализировать результаты маркетинговых активностей.

Источник