← Вставка формы на сайт

Добавление формы на сайт интернет-магазина InSales

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

Добавление формы на сайт интернет-магазина InSales 1

В редакторе InSales выберите место куда необходимо встроить форму и нажмите добавить виджет:

Добавление формы на сайт интернет-магазина InSales 2

Слева, в меню "Создание виджета", выберите пункт "Тексты и картинки":

Добавление формы на сайт интернет-магазина InSales 3

Справа найдите пункт "Текст в 1 колонку" и нажмите:

Добавление формы на сайт интернет-магазина InSales 4

Вам откроются настройки текста в 1 колонку. Нажмите кнопку <>, отвечающего за исходный код:

Добавление формы на сайт интернет-магазина InSales 5

Откроется окно "Исходный код". Вставьте ранее скопированный код. При этом, стоит добавить в теге <div>XXXXXXXX</div>, произольное обозначение формы, чтобы было видно расположение добавленный форме в конструкторе:

Добавление формы на сайт интернет-магазина InSales 6

Сохраните изменения:

Добавление формы на сайт интернет-магазина InSales 7

После сохранения Вы увидите в конструкторе блок с формой, название которой, вводили в теге <div>:

Добавление формы на сайт интернет-магазина InSales 8

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

Добавление формы на сайт интернет-магазина InSales 9

Всплывающее окно - клик по кнопке

Чтобы добавить форму в виде всплывающего окна при клике на кнопку, Вам необходимо перейти в бэк-офис InSales, "Каналы продаж" и выбрать пункт "Дизайн". Выберите необходимый шаблон и нажмите кнопку "</>":

Добавление формы на сайт интернет-магазина InSales 10

Перед Вами откроется редактор HTML/CSS/JS. Выберите пункт theme.scss раздела "Стили":

Добавление формы на сайт интернет-магазина InSales 12

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

Добавление формы на сайт интернет-магазина InSales 13

Скопируйте код кнопки, как показано на скрине выше и вставьте конструкторе InSales, нажмите сохранить. Подробнее о настройке кнопки (цвет, шрифт, заливка, рамки и др.), Вы можете посмотреть здесь.

Добавление формы на сайт интернет-магазина InSales 14

Далее необходимо перейти в редактор сайта и добавить блок, как мы по аналогии вставляли код формы на страницу выше. Нам необходимо вставить здесь вторую часть кода после закрывающего тега </style>:

Добавление формы на сайт интернет-магазина InSales 15

Т.е. необходимо добавить блок, выбрать "Текст в одну колонку" и открыть исходный код в настройках:

Добавление формы на сайт интернет-магазина InSales 16

Добавить код и сохранить. В итоге на странице сайта будет добавлена кнопка:

Добавление формы на сайт интернет-магазина InSales 17

В режиме просмотра, при клике на кнопку, откроется всплывающее окно формы:

Добавление формы на сайт интернет-магазина InSales 18

Всплывающее окно - ушко

Чтобы добавить всплывающее окно в виде ушко, перейдите в нашем конструкторе во вкладку "Получить код", пункт раздела "Всплывающее окно" и скопируйте код в поле "Всплывающее окно - ушко":

Добавление формы на сайт интернет-магазина InSales 19

Как настроить ушко (расположение, цвет, шрифт и др.) можете ознакомится здесь.

Перейдите в бэк-офис InSales - Дизайн и откройте редактор HTML/CSS/JS. Найдите пункт layouts.layout.liquid в разделе шаблоны:

Добавление формы на сайт интернет-магазина InSales 20

Опуститесь вниз, перед закрывающимся тегом </body>, вставьте ранее полученный код:

Добавление формы на сайт интернет-магазина InSales 21

В итоге, должно получится так:

Добавление формы на сайт интернет-магазина InSales 22

Сохраните изменения и при просмотре страницы сайта, будет отображаться ушко:

Добавление формы на сайт интернет-магазина InSales 23

Всплывающее окно - автопоказ

Чтобы добавить всплывающее окно в виде автопоказа, перейдите в нашем конструкторе во вкладку "Получить код", пункт раздела "Всплывающее окно" и скопируйте код в поле "Всплывающее окно - автопоказ":

Добавление формы на сайт интернет-магазина InSales 24

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

По аналогии, с всплывающем окном - ушко, нам также нужно вставить код в редакторе, бэк-офис InSales - Дизайн, редактор HTML/CSS/JS, в пункте layouts.layout.liquid в разделе шаблоны, перед закрывающимся тегом </body>:

Добавление формы на сайт интернет-магазина InSales 25

В итоге, например, задано время загрузки формы через 5 с, форма будет показана на странице сайта:


Добавление формы на сайт интернет-магазина InSales 26

Комментарии

Создай любую веб-форму
всего за 3 минуты!