Кастомные формы в Тильде позволяют собирать данные пользователей с точной настройкой полей, типов ввода и логики обработки. В стандартных формах доступны базовые элементы, такие как текст, email, телефон, но при необходимости можно добавлять поля с проверкой данных, раскрывающиеся списки и чекбоксы, управлять их обязательностью и форматированием.
Тильда предоставляет встроенные инструменты для интеграции форм с внешними сервисами: CRM, почтовыми рассылками, аналитикой. Настройка автоматических уведомлений и редиректов после отправки формы позволяет оптимизировать процесс взаимодействия с пользователем и повысить конверсию.
Правильная структура формы напрямую влияет на удобство заполнения и количество успешных отправок. Разделение полей по логическим блокам, использование placeholder и подсказок, настройка масок ввода и ограничений для каждого поля снижает ошибки и ускоряет процесс.
В этом руководстве подробно показаны шаги по созданию кастомной формы на Тильде: от добавления блока до настройки логики отправки данных. Каждый этап сопровождается конкретными рекомендациями по выбору типов полей, их валидации и интеграции с внешними системами для получения максимальной отдачи от формы.
Выбор блока для кастомной формы
При выборе блока учитывайте количество полей и тип данных. Если форма содержит более пяти полей или требует нестандартные элементы (например, выпадающие списки с изображениями), предпочтительнее использовать Zero Block. Для простых контактных форм с именем, почтой и комментарием достаточно стандартного блока Form 2 или Form 3.
Тильда поддерживает интеграцию с внешними сервисами через API и вебхуки. Выбирайте блок с возможностью подключения CRM или почтовой рассылки, если планируется автоматическая обработка данных. В блоках Form 1–Form 5 предусмотрена базовая интеграция с сервисами типа Google Sheets, Bitrix24 или UniSender.
Обратите внимание на визуальные настройки блока. В стандартных формах доступны предустановленные стили кнопок и полей, а в Zero Block вы задаете все вручную. Для согласованного дизайна с сайтом лучше использовать Zero Block, если требуется уникальная цветовая схема, шрифты и расположение элементов.
После выбора блока проверьте адаптивность. Zero Block требует ручной настройки отображения на мобильных устройствах, а стандартные формы уже оптимизированы под экраны смартфонов и планшетов.
Настройка полей и типов данных
В Тильде каждый элемент формы можно адаптировать под конкретный тип информации. Поля Текст подходят для имен, адресов и комментариев, Email – для проверки корректности почтового адреса, Телефон автоматически форматирует номер и ограничивает ввод только цифрами. Для выбора из нескольких вариантов используйте Список или Радиокнопки, где можно задать фиксированные значения.
При добавлении Чекбоксов разрешается отмечать несколько вариантов одновременно, что полезно для согласий или подписок. Поля Дата и Время упрощают сбор точной информации без необходимости ручного ввода. Каждое поле можно пометить как обязательное, чтобы предотвратить отправку неполной формы.
Для упрощения обработки данных рекомендуется задавать подсказки и маски ввода, особенно для телефона и даты. Маски гарантируют единообразие формата, например +380 (99) 999-99-99 для украинских номеров. Важным элементом является валидация, встроенная в Тильду, которая автоматически проверяет соответствие введенных данных выбранному типу.
Также можно создавать скрытые поля для передачи дополнительной информации без отображения пользователю, например источник трафика или уникальный идентификатор кампании. Это повышает точность аналитики и автоматизации обработки форм.
Добавление выпадающих списков и переключателей
В Тильде выпадающие списки создаются через поле Select. Чтобы добавить список, откройте настройки формы, выберите Добавить поле и укажите тип Select. Введите варианты выбора в отдельные строки, соблюдая порядок отображения. Для упрощения работы с большим количеством опций используйте копирование через CSV.
Переключатели доступны как поле Checkbox или Radio. Разница в поведении: Checkbox позволяет выбрать несколько вариантов, Radio ограничивает выбор одним. Для добавления переключателя создайте новое поле, выберите соответствующий тип и укажите текст для каждой опции.
При использовании выпадающих списков и переключателей важно правильно настроить обязательные поля. Это гарантирует, что пользователь не пропустит критически важные данные. Для Radio и Select можно задать значение по умолчанию, чтобы ускорить процесс заполнения формы.
Для оптимизации интерфейса избегайте чрезмерного количества вариантов в одном списке. Разделяйте информацию на логические группы или используйте несколько связанных списков. Это улучшает удобство выбора и снижает риск ошибок при заполнении.
После добавления элементов протестируйте форму в режиме предварительного просмотра. Убедитесь, что все варианты корректно отображаются и отправка данных проходит без ошибок. При необходимости внесите корректировки в текст опций или порядок отображения.
Настройка кнопки отправки и уведомлений
В Тильде кнопка отправки задается в блоке формы через раздел «Кнопка». Можно указать собственный текст, цвет фона, размер шрифта и форму кнопки. Для точного контроля действий после отправки формы активируйте настройку «Действие после отправки»: выбор возможен между показом сообщения на сайте, переходом на другую страницу или вызовом скрипта.
Уведомления на электронную почту настраиваются в разделе «Форма → Настройки». Укажите адреса получателей через запятую, выберите формат письма – HTML или текст. Для каждого поля формы можно включить отображение в письме, что позволяет видеть полные данные пользователя.
Для интеграции с внешними сервисами (CRM, Google Sheets, мессенджеры) используйте встроенные Webhook или Zapier. В настройках формы добавьте URL сервиса и выберите метод передачи данных (POST или GET). Обязательно протестируйте отправку тестовой записи, чтобы убедиться, что данные приходят корректно.
Тильда позволяет настроить уведомления не только на email, но и через push или Telegram. Для этого активируйте соответствующий интеграционный модуль и укажите токены доступа или webhook. Такой подход обеспечивает мгновенную реакцию на новые заявки.
Дополнительно можно включить проверку обязательных полей и формат данных перед отправкой, чтобы снизить количество некорректных заявок. Все настройки сохраняются автоматически, и форма готова к публикации сразу после проверки работы кнопки и уведомлений.
Интеграция формы с внешними сервисами
Для передачи данных из кастомной формы в CRM или почтовый сервис используйте встроенные возможности Тильды. В настройках блока формы откройте раздел «Форма» и выберите «Интеграции». Система поддерживает популярные сервисы: Google Sheets, Bitrix24, UniSender, GetResponse, Mailchimp.
Для интеграции с Google Sheets создайте новый документ, скопируйте ссылку на таблицу и вставьте её в поле подключения. Каждое поле формы должно соответствовать колонке таблицы, иначе данные будут записываться некорректно.
При подключении к CRM, например Bitrix24, укажите вебхук и привяжите поля формы к полям сущностей CRM. Это позволит автоматически создавать лиды или контакты при отправке формы.
Для e-mail сервисов (Mailchimp, UniSender) настройте список рассылки и соответствие полей формы полям подписчика. Проверьте тестовую отправку, чтобы убедиться, что данные корректно добавляются в выбранный список.
Если требуется отправка данных на кастомный сервер, используйте опцию «Отправка на URL». Укажите адрес API, метод POST и формат данных JSON. Настройте обработку ошибок и успешной отправки с помощью встроенного уведомления.
После интеграции проведите тестирование: отправьте форму с разными наборами данных и проверьте корректность поступления информации во все подключенные сервисы. Это позволит избежать потери данных и несоответствия полей.
Проверка корректности ввода и сообщений об ошибках
Для обеспечения точности данных используйте встроенные в Тильду типы полей с валидацией. Поля Email автоматически проверяют формат адреса, а поля Телефон требуют числового ввода и могут включать маску для конкретного формата номера.
Для текстовых полей задавайте ограничение на количество символов и обязательность заполнения. Активируйте опцию обязательное поле, чтобы форма не отправлялась при пустом значении.
Сообщения об ошибках можно настроить индивидуально. В настройках блока формы укажите короткий текст, поясняющий ошибку, например: «Введите корректный адрес электронной почты» или «Номер телефона должен содержать 10 цифр». Это повышает удобство пользователя и снижает риск неправильных данных.
Для сложных проверок используйте кастомный код с JavaScript. Например, проверка пароля на наличие заглавных букв, цифр и символов позволяет предотвратить слабые комбинации. В коде можно динамически отображать подсказки рядом с полем, показывая, какие требования не выполнены.
Проверку данных выполняйте как на клиентской, так и на серверной стороне. Клиентская валидация ускоряет работу и уменьшает количество неверных отправок, а серверная защита гарантирует корректность данных перед их сохранением или отправкой на внешние сервисы.
Публикация и тестирование формы на сайте
После настройки всех полей и интеграций необходимо опубликовать форму на сайте, чтобы проверить её работоспособность в реальных условиях.
Для публикации в Тильде выполните следующие действия:
- Откройте страницу с формой в редакторе.
- Нажмите кнопку «Опубликовать» в верхнем меню.
- Убедитесь, что выбран правильный домен или поддомен для публикации.
- После завершения процесса опубликуйте страницу, чтобы изменения вступили в силу.
Тестирование формы включает проверку всех элементов и сценариев взаимодействия:
- Проверьте корректность заполнения всех обязательных полей, включая текстовые, числовые и электронные адреса.
- Отправьте форму с разными данными, чтобы убедиться, что уведомления приходят на указанные адреса электронной почты или подключённые сервисы.
- Проверьте работу условий видимости и логики, если используются переключатели или выпадающие списки.
- Убедитесь, что сообщения об ошибках появляются при неправильном вводе и исчезают после исправления.
- Тестируйте форму на разных устройствах и браузерах, чтобы убедиться в корректном отображении и работе всех элементов.
- При наличии интеграций с CRM или мессенджерами отправьте тестовые данные и проверьте, что они корректно сохраняются и отображаются.
После завершения всех тестов убедитесь, что форма не вызывает ошибок на странице и полностью готова к приёму данных от пользователей.
Вопрос-ответ:
Как выбрать подходящий блок для создания кастомной формы в Тильде?
В Тильде есть несколько блоков, которые поддерживают формы, но для создания кастомной формы лучше выбирать блоки с пустой структурой или блоки «Форма с HTML». Они позволяют полностью настроить поля, кнопки и дизайн без ограничений стандартных шаблонов. После выбора блока стоит определить количество и тип полей, чтобы форма соответствовала цели сбора данных.
Можно ли настроить проверку ввода для каждого поля формы?
Да, Тильда поддерживает разные типы проверок. Для текстовых полей можно установить ограничения по длине и формату, для email — проверку корректности адреса, а для числовых полей — диапазоны значений. Также можно добавить пользовательские сообщения об ошибках, чтобы посетители понимали, что исправить. Это помогает избежать некорректных данных и упрощает обработку информации.
Как интегрировать форму с внешними сервисами для рассылок и CRM?
В Тильде есть возможность подключать формы к сервисам через встроенные интеграции или с помощью Webhook. Например, можно связать форму с Mailchimp, UniSender, amoCRM или Google Sheets. Для этого в настройках блока формы указывают URL сервиса или ключ API, а затем настраивают соответствие полей формы и полей сервиса. После этого все данные автоматически передаются и сохраняются в выбранной системе.
Какие шаги нужно выполнить для тестирования кастомной формы на сайте?
Тестирование формы начинается с проверки отправки данных: нужно заполнить все поля разными значениями и убедиться, что форма корректно их принимает. Затем проверяют сообщения об ошибках при неправильном вводе. После этого проверяют работу интеграций с внешними сервисами и уведомления на email. Также стоит проверить отображение формы на разных устройствах и браузерах, чтобы убедиться, что элементы не искажаются и все кнопки работают корректно.
