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

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

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

Новая директор по маркетингу разместила на главной странице огромную кнопку «Купить». И в течение нескольких недель они меняли цвет этой кнопки.

При проверке своих гипотез, ключевым элементом является форма заявки.

Как это работает:
Вы описываете свой продукт в 3-4 блоках на странице. А в конце призываете пользователей отправить свои контакты для связи или заказа.

Квизы на Тильде: создание, подключение, работа с формами и блоками

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

Способы сделать квиз на Тильде

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

Блок BF919 «Пошаговая форма»

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

Для создания опроса BF919:

1. В библиотеке блоков переходим в раздел «Форма и Кнопка», появившийся список прокручиваем вниз до BF919

1. Во вкладке «Контент формы» выбираем «Поля для ввода». Там создаем и настраиваем все поля: каждое из полей соответствует каждому этапу теста.

В итоге за несколько минут создаем в Тильде полноценный quiz или опрос с вариантами ответа.

Важно! При создании квиза через «Пошаговую форму» BF919 не забываем подключить к опросу один из сервисов приема данных, куда будет отправляться статистика.

Через ZeroBlock

Нулевой блок – это инструмент для профессиональных дизайнеров. С его помощью можно создать уникальный сайт с нуля. Сделать квиз в ZeroBlock можно в несколько шагов:

• В разделе «Мои сайты» выбираем сайт, на котором хотим разместить опрос.
• Открываем нужную страницу.
• Добавляем туда Нулевой блок – это обложка будущего квиза, поэтому уделяем ему особенное внимание, например, добавляем изображение, привлекающий заголовок и мотивирующее к прохождению теста краткое описание.
• Сохранив изменения в ZeroBlock, закрываем его и вставляем на страницу еще один блок – BF920 (раздел «Формы и кнопки»).

• В созданном блоке копируем ссылку для его открытия, затем переходим в меню редактирования нулевого блока. Надо открыть настройки кнопки и в поле URL вставить эту ссылку. Сохраняем изменения.

Публикуем сайт и смотрим, что получилось. Если все сделано правильно, увидим обложку своего квиза с кнопкой призыва к действию. Нажав на нее, перейдем в pop-up блок BF920, содержание которого идентично блоку BF919. Осталось настроить пошаговую форму опроса и квиз в ZeroBlock готов.

Конструкторы квизов

Еще один вариант – создать квиз на конструкторе и установить на сайт в Тильде. Популярные онлайн конструкторы квизов:

• Marquiz;
• Envybox;
• Flexbe;
• Moclients;
• LPmotor;
• Callibri;
• Enquiz;
• Conversus;
• Quiz360;
• PlatformaLP.

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

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

Плюсы и минусы способов

Способ	Преимущества	Недостатки
Блок BF919	Бесплатно

Много возможностей для творческой самореализации

Создаем квиз на примере Marquiz

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

Внимание! Срок действия бесплатных заявок – 14 дней.

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

Этапы создания квиза:

1. В личном кабинете выбираем шаблон:

Или нажимаем на кнопку «Начать» и в появившемся поле вписываем название квиза:

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

1. Настраиваем стартовую страницу:

• Выбираем один из трех вариантов дизайна: Standart – все на белом фоне; Expanded – все на фоне изображения; Centered – все по центру, изображение сверху;
• Фоном может быть видео или статичная картинка – на Марквиз большая библиотека медиафайлов, если ничего подходящего не найдется, можно загрузить свой вариант.
• В качестве заголовка ставим цепляющую фразу с призывом к действию и уникальным торговым предложением.
• В графе «Подзаголовок» кратко описываем выгоду и преимущества от прохождения теста.
• Title – это текст, который увидят пользователи рядом с адресной строкой.
• На кнопке желательно написать какой-нибудь призыв к действию «Пройти тест», «Начать квиз» и прочее.

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

1. Оформляем блок вопросов:

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

Доступные способы демонстрации вариантов ответов:

• текст;
• картинки;
• текст и картинки;
• смайлики;
• пустое поле для ввода варианта с клавиатуры;
• выпадающий список;
• форма для ввода даты;
• ползунок;
• форма для загрузки файлов.

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

1. Оформляем результаты:

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

1. Настраиваем Форму контактов:

Если нет понимания, как ее оформить форму, смотрим примеры конкурентов. Но следует учитывать такие моменты:

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

1. Настраиваем скидки и бонусы:

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

Как добавить квиз из конструктора на Тильду?

Чтобы вставить опрос, созданный в конструкторе Марквиз, на сайт, идем в раздел «Установка квиза» и определяемся с типом установки.

В качестве примера выбираем вариант «По кнопке» и жмем «Далее»:

Копируем код инициализации:

Заходим в Тильду, открываем настройки сайта и вставляем на страницу новый блок из раздела «Другое» – «HTML-код».

Внимание! Работа с блоками «HTML-код» возможна только на платных тарифах Tilda («Personal» или» Business»).

Итак, в новом блоке переходим в меню «Контент» и вставляем код инициализации, который был ранее скопирован в конструкторе, в поле «HTML КОД / КОД ВИДЖЕТА». Не забываем после этого сохранить изменения.

Возвращаемся в Marquiz. Теперь копируем код кнопки и добавляем его к коду инициализации на Тильде.

Все: сохраняем изменения, закрываем блок и публикуем страницу.

С этого момента квиз на Тильде начинает работу.

Если желаем, чтобы квиз открывался при нажатии на кнопку Тильды, нам потребуется:

• Скопировать инициализационный код квиза с конструктора и вставить его в новый блок (код кнопки из Марквиза в данный блок мы на этот раз не прописываем);
• Скопировать ссылку на кнопку в конструкторе (для этого в конструкторе – в разделе «Установка квиза» – переходим на вкладку «По кнопке», жмем «Своя кнопка» и копируем ссылку).

• Далее возвращаемся на Тильду, выделяем кнопку, к которой желаем привязать квиз, и переходим в «Контент» этой кнопки;

• В “Ссылку для кнопки” вставляем ссылку из Марквиза, сохраняем изменения и закрываем.

Готово! Публикуем отредактированную страницу сайта на Тильде и проверяем результат.

Советы при создании квизов

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

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

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

• спрашивать надо о конкретном факте, а не о субъективном мнении;
• в познавательных квизах избегаем сухих вопросов, рассчитанных исключительно на знание – человеку будет намного интереснее, если правильный вариант он найдет самостоятельно путем умозаключений;
• в вопросах и вариантах ответов не надо добавлять «воду» и двусмысленные высказывания;
• все ответы должны быть правдоподобными;
• квизы не стоит делать слишком длинными.

Виды и примеры квизов

Все квизы условно классифицируются по контенту на:

• развлекательные;
• продающие;
• образовательные.

Последний вид используется для проверки знаний или помощи в освоении нового материала, поэтому на коммерческих сайтах встречается крайне редко. Чего нельзя сказать о развлекательных тестах и викторинах.

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

Что касается продающих квизов – то сегодня это самый популярный и эффективный вид мини-опросников. Они помогают увеличить число заявок и снизить их стоимость, подогреть интерес к продукту и подтолкнуть клиента к покупке.

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

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

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

Тильда и Геткурс — настройка интеграции

В этой статье разберем интеграцию Тильды и Геткурса. Это выполнимо и делается просто — на страницах достаточно заменить формы Тильды на геткурсовские. То есть весь смысл в том, что на сайте открываются формы Геткурса, и все данные сразу уходят в него. И данный способ, кстати, поможет соединить ГК с любыми другими сервисами. Для этого, собственно, виджеты (подгружаемые формы) и создавались.

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

Интеграция Тильда и Геткурс

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

Размещение gc-виджета на странице

В данном варианте мы хотим интегрировать форму захвата Геткурса прямо на странице, между блоками Тильды. Для этого просто добавляем в нужном месте блок T123:

После этого переходим по красной кнопке «контент».

Откроется поле ввода кода, в которое нужно вставить код формы.

Всё! Сохраняем изменения и нужная форма показывается на странице Тильды.

Размещение виджета во всплывающем окне

Придерживаемся вышеописанной стратегии в пункте 1 с незначительными изменениями.

Теперь мы добавляем другой блок — T868:

Переходим по кнопке «контент» и вставляем код.

Здесь есть один момент — у нас появилось дополнительное поле «ссылка на popup». Я очень рекомендую менять значение, которое там установлено по умолчанию.

Например, для виджета покупки курса «эконом» впишите #popup-econom , для другого #popup-vip

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

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

Всё! Сохраняем изменения и проверяем кнопку.

Распространенная ошибка

При установке одинаковых виджетов на одной странице, они могут не показываться устройствах apple. Например, добавили форму регистрации в начале и конце лендинга. И причина тому некорректное отображение на iOS. Решение следующее — добавить к коду виджета параметр с произвольным значением — &rand=случайный_набор_букв .

У каждого виджета (которые повторяются) на странице должен быть уникальный параметр.