Как связать кнопку с формой в тильде

Обновлено: 01.05.2024

Как добавить кнопку в существующий блок

Если вы хотите добавить призыв к действию в уже существующем блоке, зайдите в настройки контента. В информационно-текстовом блоке у вас появятся поля с вариантами контента, который вы можете добавить. Выбираем вкладку “кнопка” и переходим к ее редактированию. Здесь можно добавить название кнопки, ссылку и возможность ее открытия в новой вкладке.

Рис.1. Редактирование кнопки в настройках контента

После основных настроек кнопки, можно перейти к визуальному оформлению. Для этого заходим в “Настройки” (верхний левый угол блока) и приступаем к редактированию.

*Для того, чтоб кнопка была по центру блока в настройке “Выравнивание заголовочной секции блока” выберете “По центру”.

Рис.2. Вкладка редактирования кнопки в “Настройках”

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

Как добавить кнопку отдельным блоком

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

Рис.3. Добавление кнопки в новом блоке

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

Рис.4. Здесь можно отредактировать кнопку

Вот такая простая, но, надеемся полезная статья у нас сегодня получилась о работе с Tilda.

Остались вопросы по работе с конструктором Тильда?

Не нашли ответ на интересующий Вас вопрос? Или у вас возникла другая проблема, в работе с Tilda? Задавайте вопросы, которые Вас интересуют в комментариях, на них оперативно ответит специалист отдела разработки Convert Monster.

Как добавить кнопку для лендинга на Tilda

Аббревиатура СТА происходит он английского словосочетания call-to-action, что означает «призыв к действию». Такой призыв является важнейшим компонентом любого сайта. Для его создания можно использовать конструктор Tilda, очень легкий и удобный, не требующий специальных навыков, в том числе и знания верстки. Рассмотрим способы добавления кнопки на веб-ресурс, собранный на Тильде.

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

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

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

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

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

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

После внесения всех выбранных параметров следует нажать «Сохранить и закрыть». Теперь у вас имеется требуемый элемент лендинга.

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

Чтобы добавить элемент СРА в новом отдельном блоке, следует кликнуть по символу «+» между блоками или на свободной странице. Слева откроется окошко с имеющимися вариантами контента. В нем следует открыть раздел «Форма и кнопка».

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

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

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

Красивые ссылки в Тильде, часть 2

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

1. Задаем цвет текста ссылки

Чтобы блок работал для всего сайта, создайте его на специальной странице «Шапка сайта».

2. Задаем цвет подчеркивания

В идеальном мире линия того же цвета, что и ссылка, но полупрозрачная. В Тильде прозрачность линии не поменять, но эффект можно имитировать более светлым тоном и минимальной толщиной (1px в поле «Размер линии»).

3. Задаем цвет текста при наведении

Переменные webkit-transition и transition обеспечат красивое затухание цвета при проносе курсора. Если не нужно, удалите эти строки.

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

Формы приема данных — блоки с полями, в которых посетители сайта вводят информацию (email, телефон), а вы получаете ее в сервисы приема данных.

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

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

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

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

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

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

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

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

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

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

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

Как создать пошаговую форму приема данных

Пошаговая форма подойдет, если ваша форма превышает 5−7 полей и/или вы хотите упростить заполнение формы, разбив ее на смысловые блоки. Также при помощи пошаговой формы вы можете создать тесты и квизы и отправлять их результаты в сервисы приема данных.

Использовать специальные блоки BF919 и BF920 (popup).
Использовать блок BF204N.

Создание пошаговой формы при помощи блока BF919/BF920

Перейдите в Библиотеку блоков → раздел Форма и Кнопка → выберите блок BF919, если хотите, чтобы форма отображалась на странице, или блок BF920, если хотите, чтобы форма открывалась в поп-апе.

Откройте вкладку Контент формы и передите к разделу Поля для ввода. Создайте и настройте нужные вам поля. Одно поле — один шаг.

Создание пошаговой формы при помощи блока BF204N

Откройте вкладку Контент формы и передите к разделу Поля для ввода.
Создайте и настройте нужные вам поля.

В блоке BF204N вы можете сгруппировать несколько полей в одном шаге.

Не забудьте добавить Политику конфиденциальности на последнем шаге.
Создать ее вы можете при помощи конструктора Политики конфиденциальности .

Чтобы получать данные из формы нужно подключить к ней сервис приема данных: один или несколько.

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

Войдите, чтобы использовать все возможности RUTUBE

Как сделать свою форму в ZERO BLOCK ?

5. Копируй Id зеро блока, в которой находится форма вставь в генератор, и так же копируй id блока BF204N. Если хочешь, то можешь прописать свою ссылку для кнопки.

6. Добавь блок Т123 и вставь в него сгенерированный HTML код;

7. Если из формы нужно получать только некоторые поля, поставь галку в генераторе и в выпадающем поле напиши любое текстовое значение, к примеру From, дальше просто укажи в нужных полях это значение в формате nameForm, emailForm, phoneForm;

ВАЖНО: Модификация не работает с полями для загрузки файлов Google Drive, Yandex Disk, DropBox! Работаем над исправлением этого момента. Пока что работает только с загрузкой файлов в Uploadcare

Как сделать свою форму в ZERO BLOCK?

Рис.1. Редактирование кнопки в настройках контента

Рис.2. Вкладка редактирования кнопки в “Настройках”

Приступаем. Создание одного большого лендинга по экранам

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

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

Видео

Собираем макет для планшета свертикальной ориентацией

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

Возвращаемся в редактор Zero-блока и переходим на версию для планшета с вертикальной ориентацией.

Вот что мы увидим.

Могло быть и хуже. Вот что мы сделаем:

Слегка уменьшим плашку с текстом по горизонтали и увеличим по вертикали.
Сместим плашку влево.
Слово MOON перенесём на следующую строку.
Нумерацию слайдера сместим вниз и немного увеличим.
Фотографию сдвинем вправо — останется только часть Луны. Так она не будет перекрывать меню и логотип.

Первым делом выставляем нужную высоту в панели настроек. Рекомендую всегда начинать с этого действия — так удобнее работать.

Указываем высоту рабочей области

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

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

Перемещаем и выравниваем элементы

Сейчас текст маловат относительно блока — увеличим его. Начинаем с заголовка — Photo Moon. Кликните по нему и перейдите к панели настроек. Напротив Size (размер шрифта) задайте значение 70.

Увеличиваем заголовок блока

Отлично, заголовок увеличили, но возникла проблема — он вылез за пределы блока. Тут есть два решения:

1. Переходим в режим редактирования текста и переносим слово Moon на вторую строку.

Правда, теперь заголовок разобьётся на две строки на всех экранах. Это особенность «Тильды». Но есть второй способ.

2. Меняем размер контейнера текста вручную или с помощью настройки ширины контейнера.

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

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

Теперь с помощью контейнера текста переносим слово Moon на вторую строку и уменьшаем параметр Spacing (межстрочный интервал) до единицы.

Как настроить сайт на Tilda

Те функции, с помощью которых мы создали сайт, – это не все, что может Тильда. Есть еще один раздел редактирования, в котором можно поменять различные настройки веб-сайта. Чтобы его открыть, достаточно перейти в раздел «Мои сайты», выбрать «Редактировать сайт» и затем нажать «Настройки сайта».

Здесь находятся все внутренности сайта: настройка шрифтов, цвета и главной страницы, аналитика сайта, добавление собственного доменного имени, подключение SEO-сервисов и многое другое.

Как и настройки артборда, слои по умолчанию не отображаются. Для начала работы с ними нужно нажать комбинацию клавиш Ctrl+L (либо ⌘+L для MacOS). Этот инструмент позволяет нам схематично посмотреть на элементы, из которых состоит Zero Block.

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

Учитывайте, что слои имеют приоритет по высоте. Если фон будет выше слоя с текстом, то пользователь увидит только фон – он закроет собой текст. Менять слои можно, перетаскивая их мышкой в меню слоев.

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

Модульная сетка

Обратите внимание на вертикальные полосы в артборде. Это направляющие линии, которые используются для позиционирования элементов. Их отображение можно включать и выключать – достаточно нажать на клавиатуре G. Мы ориентируемся на них, когда размещаем элементы, чтобы они выглядели органично и привычно для пользователя. Таким образом, нам не придется вручную считать пиксели.

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

Для создания горизонтальных направляющих нужно нажать комбинацию клавиш Ctrl+H (⌘+H для Mac), а для вертикальных – Ctrl+Shift+H (⌘+Shift+H).

Также это можно сделать через меню в правом верхнем углу:

Направляющие не отображаются на сайте, а только служат для более точного позиционирования элементов. Удалять их не обязательно – можно просто временно скрыть через то же меню (пункт Guides: Hide/Show). Если все-таки собираетесь удалять, наведите курсор на направляющую и нажмите крестик.

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

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

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

Плюсы:

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

Минусы:

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

Тарифные планы Tilda

Владельцам аккаунтов доступно 3 тарифных плана – Free, Personal и Business.

Free – бесплатный, активируется автоматически после регистрации учетной записи. Он вполне может сгодиться для создания сайта, но совсем простого. Подобный тариф разрешает пользоваться Zero-Block, однако в нем нет опции подключения собственного доменного имени, SSL-сертификата, аналитики сайта и многого другого. Тариф Free – это отличный способ разобраться в работе конструктора.

Лимиты тарифа: максимальное количество проектов – 1, количество страниц для каждого проекта – 50, объем загруженных файлов – 50 Мб.

Personal

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

Лимиты тарифа: максимальное количество проектов – 1, количество страниц для каждого проекта – 500, объем загруженных файлов – 1 Гб.

Стоимость тарифа: 750 руб./месяц + домен в подарок.

Business

Business – профессиональный тариф, который предназначен для размещения нескольких сайтов. Он позволяет на одном аккаунте создать 5 и более сайтов – для каждого отведено определенное количество страниц, свой домен и так далее.

Тарифный план также имеет разновидности – это Business 10, 15, 20 и 30. Число указывает на количество сайтов. Например, в тарифе Business 15 разрешено создавать до 15 сайтов.

Еще одно отличие от предыдущих тарифов – возможность экспорта исходного кода. Благодаря этому можно создать сайт на Тильде и перенести его на свой хостинг. Подойдет для тех, кто хочет подредактировать HTML-код и разместить его на другом хостинге.

Лимиты тарифа: максимальное количество проектов – от 5 до 30, количество страниц для каждого проекта – 500, объем загруженных файлов – 1 Гб.

Стоимость тарифа: от 1250 руб./месяц + домен в подарок.

Продвинутый режим доставки

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

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

CTA (от англ. call-to-action, призыв к действию) — один из самых важных компонентов любого сайта. Простой конструктор Tilda не требует знаний верстки, чтобы добавить недостающий элемент. Давайте разберемся, как можно добавить кнопку на ваш сайт, собранный на Тильде.

Как добавить кнопку в существующий блок

Рис.1. Редактирование кнопки в настройках контента

Рис.2. Вкладка редактирования кнопки в “Настройках”

Как добавить кнопку отдельным блоком

Рис.3. Добавление кнопки в новом блоке

Рис.4. Здесь можно отредактировать кнопку

Вот такая простая, но, надеемся полезная статья у нас сегодня получилась о работе с Tilda.

Остались вопросы по работе с конструктором Тильда?

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