0 0,00 

Есть вопрос? Звоните!

+7 923 192-46-05

Форма геткурса на Тильде

21.05.2021
2
1485
Форма геткурса на Тильде

Кейс: Есть курс на GetCourse и необходимо на сайте, который создан на Tilda, предоставить доступ к первому модулю бесплатно.

Решение:

  • Создать форму на Геткурсе (указать параметры по регистрации и добавлению пользователя в группу, настроить параметры группы)
  • Разместить виджет геткурс на сайте

Содержание

Создание формы на Геткурсе

Для формы необходимо создать виджет:
Переходим Сайт –> Виджеты –> Создать виджет

Сайт виджеты
Создание формы на геткурс
Создание формы на геткурс

Выбираем элемент формы для добавления в виджет.

Добавление формы
Изначальная форма

Теперь нужно привести форму к виду похожему на формы сайта.

Форма с сайта

Изменим заголовок. Для этого нужно навести на заголовок и нажать на шестеренку.

Заголовок формы

Вводим название формы и нажимаем Сохранить и закрыть.

Заголовок формы

Изменим цвет и надпись кнопки. Сначала посмотрим цвет на уже существующих формах сайта. Зайдем в редактирование блока и посмотрим настройки кнопки.

Редактирование блока с 1 модулем

Скопируем код цвета.

Цвет кнопки

Затем перейдем обратно к форме на геткурсе, наведем мышь на кнопку и нажмем на шестеренку.

Кнопка

Изменим наименование кнопки и вставим цвет, взятый из настроек кнопки сайта. Также поменяем цвет шрифта, установим белый.

Цвет кнопки

Изменим настройки стиля, наведем на форму и нажмем кнопку Стиль.

Стиль
Стиль

Изменим отступы.

Стиль

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

Настройки полей
Настройки поля

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

Настройки поля

Вот что у нас получилось:

Форма

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

Стиль
Внесем следующий код и сохраним:
				
					.f-input {
border: 1px solid #ba3a96 !important;
}
.btn {
width: 530px !important;
}
				
			
Настройка стиля
Далее нужно настроить параметры формы. Зайдем в настройки.
Настройки формы
Настройки формы

В обработчик формы добавим действия:

 

  • Показать сообщение (вводим нужное сообщение)
  • Добавить пользователя в группу (выбираем группу, в которую должен быть добавлен пользователь)
  • Авторизовать пользователя. Полная авторизация, запрашивать пароль. (Пользователю придет письмо о регистрации)
Показывать сообщение
Добавление пользователя в группу
Авторизация пользователя
Наша форма готова, теперь вставим её на сайт. Для этого скопируем код виджета.
Настройки формы
Копируем код виджета в зависимости от наличия сертификата, т.е. защищен ваш сайт или нет.
Настройки и код виджета

Размещение формы на Тильде

Добавим на сайт блок со всплывающим окном: Другое –> Т868

Добавление блока всплывающего окна
Блок

Установим ширину и высоту в настройках блока.

Настройки блока

Зайдем в контент и вставим код виджета, а также скопируем ссылку на popup.

Контент блока

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

Настройки кнопки в блоке с 1 модулем

Наша форма готова!

Форма на сайте

Не забудьте опубликовать страницу сайта! Для этого нажмите кнопку Опубликовать в верхнем правом углу страницы.

Опубликовать

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

5 2 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
2 комментариев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
endomorphic-proportion
Авторизация
*
*
Регистрация
*
*
*
Пароль не введен
Генерация пароля
2
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
0
    0
    Корзина
    Корзина пустаВернуться в магазин