Как сделать свою кнопку для формы в zeroblock в tilda

Добавил пользователь Skiper
Обновлено: 05.10.2024

Tilda — востребованный и функциональных конструктор сайтов. Но у неё есть недостатки. Например - проблемы с работой обратной связи. Разбираемся как с этим быть.

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

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

Возьмём пример: студия делает симпатичные сайты и лендинги на Тильде. На тарифе Personal (6000 руб/год) хостится максимум 1 сайт, на Bussines (12 000 руб/год) - 5. Когда количество сайтов переваливает через очередное ограничение порога, возникает потребность покупать дорогой тариф. Конец у этой гонки — тариф на 30 сайтов, который стоит 80 тысяч рублей в год.

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

перестают работать все способы обратной связи;
у вас пропадает CRM;
перестаёт работать отправка достижений целей в систему аналитики — в Тильде она реализована как просмотр отдельной страницы в её структуре.

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

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

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

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

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

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

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

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

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

Плюсы:

бесплатно;
интерфейс простой и понятный;
лёгкая интеграция с метрикой.

Минусы:

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

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

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

минимум времени на создание;
бесплатно;
у многих есть плагины для популярных CMS;
редко - дополнительные плюшки.

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

10 - 100 заявок в месяц, привязать к CRM невозможно;
шаблонный дизайн (вы не сможете сохранить дизайн формы);
ремарка или ссылка на сайт-сервис и т.д.

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

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

Плюсы:

нет ограничений числа заявок;
работает на всех CMS;
интеграция с CRM-системами, сервисами рассылки, отправка целей в систему аналитики;
кроме этого, сервис содержит все вышеперечисленные достоинства платных и условно бесплатных приложений.

Часто лендинги для предпринимателей — тёмный лес. Страшно, непонятно и ещё сверстать надо! А если хочется свой дизайн, а не стандартный, то вообще жутко. На самом деле, всё не так страшно. Специалист по лендингам Олеся Зайко рассказала, как с помощью зеро-блоков Тильды собирать нужные блоки лендингов, которых нет в шаблонах. Время на прочтение — около 11 минут.

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

Когда я делала свои первые лендинги, я не использовала зеро-блок. Он меня пугал. Нет, серьёзно, я открывала его, смотрела на эти шаблонные картинки с надписями – и сразу же закрывала.

Теперь как минимум половину блоков я собираю в зеро. Его ещё называют нулевым блоком. Более того, я подумываю о том, чтобы перейти на вёрстку в зеро полностью, не используя готовые блоки.

Что же изменилось? Я увидела те возможности, которые даёт зеро-блок. Мне нравится гибкость его настроек. И то, что в нём можно сверстать любой дизайн.

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

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

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

Когда без зеро-блока не обойтись

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

Итак, ситуации, в которых нужен зеро-блок:

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

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

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

Лайфхак

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

Продублируйте блок, который собрались перекидывать в зеро. И только когда у вас появится два одинаковый блока, переводите в зеро только один из них.

Для чего это делается?

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

Начало работы в нулевом блоке и его возможности

А теперь внимание. Всё, что есть на экране – удаляйте. Ctrl+A, Delete. Пусть останется только чистый лист.

Мы видим, что в нулевом блоке можно добавлять:

текст,
изображение,
фигуру,
кнопку,
видео,
подсказку,
код,
форму,
галерею.

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

Я хочу показать, как собрать и адаптировать самый простой экран в зеро-блоке: добавить фотографию, подпись, кнопку.

В нулевом экране можно за пять минут (реально за пять, я засекала) собрать самую простейшую визитку.

Как собрать простую визитку в зеро-блоке

Делай раз. Добавляю свою фотографию

Нажала на квадрат. Нажала на Settings справа внизу.

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

Делай два. Добавляю текст

Пишите здесь всё, что ваша душа пожелает. При нажатии на текстовый элемент переходите в его настройки. Это та же кнопка Settings справа внизу.

Здесь вы можете изменить цвет, размер и другие характеристики, а также выровнять текст с помощью вкладок Left, Center, Right.

Вот несколько важных нюансов:

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

Делай три. Добавляю телефон

Делай четыре. Добавляю кнопку

Для этого я щёлкаю по кнопке и захожу в Settings. Там я:

Меняю текст в поле CAPTION.
Ставлю в Url ссылку на блок /form (который добавлю позднее – там будет форма заявки с моими контактами и соцсетями).
Удаляю цвет из поля BGCOLOR – чтобы сделать кнопку прозрачной. В этом же поле можно изменить цвет кнопки.
Меняю размер шрифта кнопки в поле SIZE.
Вручную растягиваю размер кнопки, чтобы она была пошире – и заодно перетаскиваю её на нужное место.
Опускаюсь в настройках чуть ниже и в поле BORDER ставлю цвет обводки кнопки.
И указываю толщину обводки в поле BRDR.SIZE.

Адаптация для разных экранов

Самой большой ошибкой было бы остановиться на первых четырёх шагах сборки визитки. И я видела лендинги, где не настроена мобильная вёрстка – нет зрелища печальнее.

Проверка вёрстки

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

Проверить это можно так.

Полезные ресурсы

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

Приведу здесь ресурсы, которыми пользуюсь.

Чат Тильдошной в телеграме, где можно задавать дурацкие (и не очень) вопросы.
Канал Tilda Publishing в YouTube.

Всем удачи в создании своих страниц и сайтов. Добавляйтесь ко мне в Фейсбук, будем общаться.

Олеся приглашает на бесплатную консультацию, на которой ответит на ваши вопросы по созданию сайта. Запись на сайте.

Олеся Зайко, специалист по лендингам

Создание кнопок СТА – один из важных аспектов при создании посадочных страниц. Специалисты дают рекомендации, советы, как создавать лендинг.

В уже имеющийся блок

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

Добавление отдельным блоком

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

Работа с конструктором Tilda очень проста и доступна каждому, потому что не требует никаких особых навыков и умений.

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

HTML-код фиксированного меню, которое появляется при прокрутке

Необхоимо создать блок меню ME403 с заданной шириной. Затем создать Zero-блок с выравниванием всех элементов в контейнере относительно "window". В поле с кодом вставить номер Zero-блока и ширину, которую мы задали в меню-гамбургере. Следите, что все элементы в Zero-блоке правее границы в указанные вами количество пикселей будут не видны при открытии меню.

Нам потребуется zero block тильды. Для примера, возьмем страницу из шаблонов и переконвертируем в зеро.

Затем выделим элемент и откроем панель настроек.

Идем в раздел пошаговая анимация тильды, и выбираем анимацию при скролле.

Настраиваем необходимые параметры, чтобы закрепить блок при скролле в тильде есть параметр FIX, по умолчанию там NONE, нужно заменить на FIXED. Тогда наша кнопка будет ездить за пользователем. Далее нажимаем сохранить и возвращаемся в редактор, нажимаем ПУБЛИКОВАТЬ.

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

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