Если на вашем сайте уже есть кнопки отправки заявок, вы можете сделать так, чтобы по их нажатию открывалась форма записи "Мой Класс" и заявка отправлялась в нашу CRM - показывать кнопки "Мой Класс" в таком случае не придется. Это полезно, когда ваш сайт оформлен в определенной стилистике и вам важно сохранить действующие кнопки.
Содержание статьи:
- Общий случай,
- Размещение формы в конструкторе Tilda.
Общий случай
1. Создайте в нашей CRM в разделе "Для сайта" новый виджет с типом "Форма/кнопка":
Или выберите уже существующий виджет с типом "Форма/кнопка".
В редактировании виджета выберите тип "Форма на существующую кнопку".
Настройте филиалы, группы, другие параметры виджета.
Сохраните изменения.
2. В списке виджетов нажмите у вашего виджета на "Код для вставки" (его также можно увидеть в редактировании виджета в самом низу):
Разместите две указанные части кода на странице вашего сайта. Верхнюю часть необходимо поставить выше нижней, но где именно значения не имеет - т.к. это не простая кнопка, верхняя часть будет скрыта от пользователя в любом случае.
В нашем примере в редакторе сайта PlatformaLP мы поставили код в одном блоке:
Создайте или найдите кнопку на вашем сайте, на которую вы хотите разместить нашу форму.
Выберите в качестве действия у кнопки "Выполнить Javascript" (в разных редакторах названия действия могут несколько отличаться):
В само событие вставьте текст из блока "Код для вставки - Javascript":
Готово.
По клику на кнопку вашего сайта загружается форма "Мой Класс":
Если вам необходимо не Javascript, а html-оформление, возьмите код из блока "Код для вставки - Html":
Размещение формы в конструкторе Tilda
Если у вас уже есть на Tilda созданные формы и кнопки и вы не планируете или не можете их менять, вы можете создать интеграцию с Tilda, и тогда данные с ваших форм будут попадать в CRM "Мой Класс". Подробнее об этом здесь. Однако в таком случае будут существовать ограничения - не будет проверки на кол-во свободных мест, не будет показа занятий и возможности показа всего расписания или календаря.
Помощь по Тильде: http://help-ru.tilda.ws/html
Способ 1
Выполните действия 1 и 2, описанные в этой статье выше, а именно:
- Создайте в нашей CRM в разделе "Для сайта" новый виджет с типом "Форма/кнопка". В редактировании виджета выберите тип "Форма на существующую кнопку".
- Создайте блок "T123 Html-код" в конструкторе и разместите первые две части кода формы, которую вы создали, в данном блоке (подробнее об этом здесь).
Далее выберите в Тильде в списке блоков "Нулевой блок".
Затем нажмите "Редактировать блок", удалите в нем все содержимое и добавьте в нем HTML.
В HTML разместите код кнопки, используя тег <button>. Внутри тега необходимо добавить код формы из блока "Код для вставки - Html".
Пример кода кнопки, где надпись на кнопке "Отправить заявку" (можете изменить на свое):
<button onclick="WdgMoyklass['exQPiVfF2YPkbgmZvxoR7vOYD5O5guaS0A'].loadFormByModal();" type="submit" class="t-submit">Отправить заявку</button>
Добавьте стили у кнопки, чтобы оформить ее цвет, скругление и другие параметры с помощью кода style="...".
Например, мы указали
- цвет надписи на кнопке (color) - белый (#ffffff),
- цвет самой кнопки (background-color) - зеленый (#368c17),
- радиус скругления (border-radius) - сильное скругление (50px), для прямых углов нужно указать 0 px.
Тогда весь будет выглядеть так:
<button onclick="WdgMoyklass['exQPiVfF2YPkbgmZvxoR7vOYD5O5guaS0A'].loadFormByModal();" type="submit" class="t-submit" style="color:#ffffff;background-color:#368c17;border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;" >Отправить заявку</button>
Не забудьте сохранить изменения и опубликовать страницу.
Код кнопки вы можете узнать, предварительно разместив на своем сайте понравившуюся вам кнопку и затем просмотрев код страницы.
Способ 2
а) Создайте в нашей CRM в разделе "Для сайта" новый виджет с типом "Форма/кнопка". В редактировании виджета выберите тип "Форма".
Далее выберите в Тильде в списке блоков "Нулевой блок" и перейдите в его редактирование.
Очистите его содержимое и добавьте HTML.
Затем в HTML разместите обе части кода вашей формы.
б) Выберите в списке блоков “BF503 Popup: information”.
Далее выберите у этого блока “Контент” и очистите в нем все содержимое.
в) Добавьте блок "T123 Html-код", затем выберите "Контент" у данного блока и разместите в нем следующий код с ID номерами своих блоков:
<style>
.shirina{ background:none !important; right: 0 !important; left: 0 !important; }
.parpadding{ padding:0 !important; }
</style>
<script>
var ZeroPopID = '#rec133854388'; //Прописываем ID Zero
var PopWindID = '#rec133855798'; //Прописываем ID PopUp окна BF503
$(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID));
$(PopWindID + " .t-popup__container").parent(".t-popup").addClass("parpadding")
</script>
ID блока можно узнать, открыв его настройки.
г) Добавьте кнопку, выберите “Контент” и укажите ссылку на поп-ап блок, добавленный ранее.
Не забудьте сохранить изменения и опубликовать страницу.
Полезное видео об оформлении поп-апов в своем стиле на Тильде: https://www.youtube.com/watch?v=FTLfjhChG9E
Комментарии
0 комментариев
Статья закрыта для комментариев.