Как сделать свою кнопку для формы в ZeroBlock в Tilda
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Связаться с нами
Задать вопрос
Купить шаблон
Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)
Заказать установку примера
Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.
Как добавить форму в конструкторе сайтов Tilda
Чтобы добавить форму на страницу сайта, созданного с помощью конструктора сайтов Tilda, Вам необходимо зайти во вкладку «Получить код» в необходимой форме и скопировать код из поля «Код для вставки на сайт. Javascript (рекомендуем)»:
Далее перейдите в Tilda в режиме редактирования Вашего сайта и кликните в необходимом месте, где нужно вставить форму:
Важно. В конструкторе сайтов Tilda возможность добавлять html-блок, который используется для добавления специфичных функций, уникальных элементов, любой код, включая тэги script style, доступен только в платных тарифах.
Слева откроется библиотека блоков, опуститесь вниз и выберите раздел «Другое»:
Нажмите кнопку HTML-код:
Этот блок добавится и далее нажмите кнопку «Контент» для редактирования:
Теперь, вставьте ранее скопированный код формы, в поле «HTML КОД/КОД ВИДЖЕТА»:
Нажмите кнопку «Сохранить и закрыть»:
Добавленный код сохранится и, чтобы увидеть изменения, кликните «Опубликовать»:
После публикации форма будет уже отображена на странице сайта:
Если необходимо, чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо нажать кнопку «Контент»:
Вам необходимо добавить такой код в поле «Ссылка для кнопки»:
javascript:FDPopup.open(ID123456,>);
Где ID123456 — ID Вашей формы
Если Вы форму размещаете один раз на сайте, то в конструкторе выше кнопки, необходимо выбрать добавления HTML-блока в виде:
В этом блоке нужно добавить такой код:
После добавления сохраните и нажмите кнопку «Опубликовать»:
При просмотре по клику на кнопку из тильды, откроется форма:
Если у Вас форма будет размещена на нескольких страницах сайта, то рекомендуем добавить код вызова формы в «head» сайта. Для этого Вам необходимом зайти в «Настройки сайта»:
Выберите раздел «Ещё»:
В поле «HTML-код для вставки внутрь HEAD», нажмите кнопку «Редактировать код»:
Укажите аналогичный код:
Сохраните настройки и опубликуйте.
Описанный способ выше отлично работает. Также можно в другом виде добавить отображение попапа.
Чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо выбрать добавления HTML-блока в виде «Popup HTML-код в попапе»:
Блок попапа добавится и далее нажмите кнопку «Контент» для редактирования
В Tilda попап работает таким образом:
- когда страница загружается наш код выполняется, форма встраивается там где нужно
- потом javascript код Tilda вырезает всё содержимое попапа и сохраняет где-то у себя
- когда кликаешь на кнопку, то попап показывается и в него вставляется то содержимое, что он вырезал, но там у нас уже есть форма, а когда вставляется код, то вызывается еще раз наша форма, поэтому в некоторых случаях происходит дублирование формы
В режиме редактирования блока попапа вставляете такой же код, только необходимо добавить такие строчки, чтобы не было дублирования:
setTimeout(function() < if ($('#form_ID_1').is(':visible')) < . . >>, 0);
Этот код проверяет, если попап отображается, то делается небольшая задержка и форма вставляется, а если попап скрыт, то ничего не происходит.
В поле «ССЫЛКА НА POPUP», Вы должны использовать указанную ссылку для кнопок или блока, где должен показываться этот попап. Например, добавили кнопку «Кнопка всплывающего окна», заходим в настройки этой кнопки и в поле «ССЫЛКА ДЛЯ КНОПКИ» указываем ссылку, ранее полученную:
Если будете использовать код формы несколько раз на странице, то необходимо руководствоваться этой инструкцией по добавлению кода.
Теперь, при клике на заданную кнопку, откроется попап:
Если Вы будете вставлять всплывающее окно на страницу, в виде «Ушко», то скопируйте необходимый код в нашем конструкторе:
И также добавьте HTML-код и зайдите в настройки редактирования, кликнув кнопку «Контент»:
Вставьте код в поле «HTML КОД/КОД ВИДЖЕТА», нажмите «Сохранить и закрыть» и «Опубликовать»:
На сайте появится всплывающее окно в виде «Ушко»:
Чтобы добавить всплывающее окно в виде кнопки, внешний вид которой, Вы можете настроить в нашем конструкторе, то таким же образом добавляете код с помощью HTML-блока. Аналогичным образом добавляется код и для всплывающего окна в виде автопоказа.
Стоит отметить, если Вы встраиваете несколько форм на странице, то необходимо изменить значение после ID формы: (form__X). Более подробную информацию найдёте здесь.
Лендинг на Tilda: как добавить кнопку?
13.05.2020
Сложность: новичок
6 мин.
10 079
CTA (от англ. call-to-action, призыв к действию) — один из самых важных компонентов любого сайта. Простой конструктор Tilda не требует знаний верстки, чтобы добавить недостающий элемент. Давайте разберемся, как можно добавить кнопку на ваш сайт, собранный на Тильде.
Как добавить кнопку в существующий блок
Если вы хотите добавить призыв к действию в уже существующем блоке, зайдите в настройки контента. В информационно-текстовом блоке у вас появятся поля с вариантами контента, который вы можете добавить. Выбираем вкладку “кнопка” и переходим к ее редактированию. Здесь можно добавить название кнопки, ссылку и возможность ее открытия в новой вкладке.
Рис.1. Редактирование кнопки в настройках контента
После основных настроек кнопки, можно перейти к визуальному оформлению. Для этого заходим в “Настройки” (верхний левый угол блока) и приступаем к редактированию.
*Для того, чтоб кнопка была по центру блока в настройке “Выравнивание заголовочной секции блока” выберете “По центру”.
Рис.2. Вкладка редактирования кнопки в “Настройках”
В настройках находим вкладку “стиль кнопки” и выбираем необходимый дизайн. Если вы развернете вкладку “дополнительные настройки”, то сможете настроить тени, изменение цвета при наведении и другие классные эффекты. После того, как вы внесли все необходимые изменения, нажмите “сохранить и закрыть”. Кнопка добавлена в ваш блок!
Как добавить кнопку отдельным блоком
Если вы хотите добавить кнопку в новом отдельном блоке, для этого нужно нажать на значок “+” между блоками или на пустой странице. Слева у вас появится окно с возможным контентом, в котором нужно выбрать вариант “форма и кнопка”.
Рис.3. Добавление кнопки в новом блоке
В данной категории вы можете выбрать разные форматы для вашей кнопки: простой CTA, кнопка с призывом, форму для заполнения с кнопкой и многое другое. Обратите внимание, что большинство контента в этом разделе доступно на оплаченном аккаунте.
После того, как вы добавили кнопку на новом блоке, вы можете отредактировать ее в привычном меню слева вверху блока. В “настройках” можно полностью поменять визуал, а в “контенте” исправить текст и ссылку кнопки.
Рис.4. Здесь можно отредактировать кнопку
Вот такая простая, но, надеемся полезная статья у нас сегодня получилась о работе с Tilda.
Остались вопросы по работе с конструктором Тильда?
Не нашли ответ на интересующий Вас вопрос? Или у вас возникла другая проблема, в работе с Tilda? Задавайте вопросы, которые Вас интересуют в комментариях, на них оперативно ответит специалист отдела разработки Convert Monster.
ВЕра Здравствуйте ! Обращаюсь к вам по такому вопросу. я сделала самостоятельную кнопку под формой, (так как не смогла в форме расположить ее по середине) и теперь не знаю куда будут отправляться заявки и впринципе как сделать ее рабочей?
Как сделать форму, чтобы принимать данные?
Чтобы сделать форму, подключите сервисы приема данных в Настройках сайта → Формы, выберите подходящий блок из категории «Форма» настройте его и опубликуйте страницу с формой.
Похожие вопросы
- Как отправлять заявки себе в Telegram?
- Как отправлять заявки себе на почту?
- Заявки из форм не приходят
- Как поменять цвет текста или фона в сообщении об успешной отправке формы?
- Как отправлять заявки в SMS?
Этот ответ был вам полезен?
Просмотры: 57536
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc