Как добавить форму в конструкторе сайтов WIX
Чтобы добавить форму на страницу сайта, созданного с помощью конструктора сайтов WIX, Вам необходимо зайти во вкладку «Получить код» в необходимой форме и скопировать код из поля «Код для вставки на сайт. Javascript (рекомендуем)»:
Далее перейдите в WIX в режиме редактирования Вашего сайта. Слева нажмите иконку «Добавить»:
Откроется меню, Вам необходимо выбрать пункт меню «Вставка кода» и «Вставка виджета»:
Отобразится блок HTML, нажмите шестерёнку «Настроить»:
Откроется всплывающее окно «Настройка HTML», где необходимо в поле «Добавьте код (только HTTPS)», вставить ранее скопированный код из нашего конструктора:
Нажмите кнопку «Применить». Разместите блок HTML, где Вам необходимо и форма будет готова к использованию:
Стоит сказать про передачу UTM меток в форму, которая встроена на WIX.
Wix использует заголовок strict-origin-when-cross-origin, который запрещает другим сайтам, отличным от исходного домена передавать Referer, а т.к. форма встраивается на сайте через дополнительный iframe, то внутри этого iframe уже нет информации о utm-метках. Единственным решением этой проблемы можно использовать вставку формы через GTM (Google Tag Manager), при котором форма размещается на сайте без дополнительного iframe.
Здесь мы рассматривали, как добавлять форму через Google Tag Manager.
После того, как Вы добавили через GTM форму указанным способом, то данный код добавляет форму в самый низ сайта. Чтобы добавить в заданный блок на сайте, Вам необходимо знать html ID этого блока.
Для этого нужно использовать вот такой код:
Чтобы узнать ID блока, Вам необходимо открыть конструктор сайтов и добавить элемент «Текст»:
Выберите любой текст и пропишите что-нибудь или укажите, например, знак препинания «.»:
Мы для примера указали слово «Текст», чтобы было нагляднее. Сохраните изменения и опубликуйте. Откройте Ваш сайт, найдите добавленный блок (текст), нажмите правой кнопкой и выберите «Исследовать»:
Откроется инспектор, внешний вид может отличатся, в зависимости от того, какой Вы браузер используете. Вам необходимо подняться выше выбранного блока, т.е. найти тег
Теперь этот код, с Вашим значением HTML ID, добавьте в Google Tag Manager и на месте элемента (в качестве примера использовали «Текст»), будет отображена форма:
Лучше использовать какой-нибудь знак препинания, чтобы он был незаметен на Вашем сайте. Расположите этот блок в необходимом месте. Теперь значения UTM-меток будут передаваться при отправке формы, при таком способе добавления кода формы, с помощью Google Tag Manager.
Интеграция с веб-формами Wix
Данная интеграция будет полезна, если ваш сайт размещен на платформе Wix, и вы хотите собирать контактные данные с помощью формы на нем.
Подготовка к интеграции
Перед настройкой интеграции вам нужно:
создать дополнительные поля в системе eSputnik, аналогичные полям, которые вы планируете добавить в форму;
подготовить письмо для подтверждения контакта (DOI), если с помощью формы вы планируете собирать новых подписчиков, а не обновлять данные о старых;
подготовить форму подписки;
выбрать цель формы.
О создании дополнительных полей вы можете прочесть в специальной статье, а мы перейдем к следующим этапам подготовки.
Подготовка письма со ссылкой для подтверждения контакта
Кликните по кнопке, отвечающей за подтверждение подписки, и выберите одноименный тип ссылки.
При этом тип события выбирать не обязательно, т. к. он подставляется автоматически и является системным.
Настройки формы подписки
Выбор названия и сервиса для формы
1. Перейдите на вкладку Сайт —> Формы.
2. Нажмите кнопку “Создать интегрированную форму”.
3. Задайте форме название, выберите сервис Wix и нажмите “Далее”.
Выбор сегментов и цели формы
1. На вкладке “Цель формы” выберите группы, в которые будут добавляться контактные данные:
1) Новая группа: при активации свитчера откроются поля для добавления названия группы и ее меток;
2) Существующие списки: при активации свитчера появится кнопка “Добавить группы”, нажав на которую вы увидите список групп, созданных в вашей организации. Поставьте галочки напротив названий групп, в которые нужно передавать контакты.
5. Выберите тип контактных данных, которые будете собирать:
Новые: для сбора только новых, существующие контакты не смогут подписаться.
Все: смогут зарегистрироваться как новые, так и существующие контакты, опция подходит, например, для записи на мероприятия.
Дополнительные данные только для существующих контактов: опция подходит для сбора дополнительной контактной информации (дата рождения, возраст, должность и т. д.).
Выбрав группы и тип контактных данных, нажмите “Далее”.
Настройка интеграции с Wix
Если настраиваете первую интеграцию с Wix, укажите адрес сайта, на котором будет расположена форма.
В сервисе Wix перейдите в раздел Автопроцессы и кликните по кнопке “Новый автопроцесс”.
Введите ваше произвольное название и выберите Wix Формы.
В выпадающем списке ниже выберите нужную форму.
Скопируйте URL Webhook на вкладке “Интеграция с Wix”.
Далее в сервисе Wix выберите “Подключить Webhook”, вставьте автоматически сгенерированную ссылку в Целевой URL и нажмите кнопку “Включить”. Ссылку можно найти на вкладке “Интеграция с Wix”.
Сопоставление полей
Есть четыре поля, которые добавляются в поля контакта в eSputnik автоматически: email, номер телефона, имя и фамилия.
Если вы собираете другие данные в форме подписки, например, модель телефона или возраст, тогда нужно создать дополнительные поля, а потом сопоставить их.
Как сопоставить дополнительные поля формы
Заполните форму на вашем опубликованном сайте и отправьте запрос.
Нажмите кнопку “Показать данные от Wix” на вкладке “Поля формы”.
Проверка и редактирование настроек
Переходим на последний этап настройки. Здесь можно перепроверить и в случае необходимости отредактировать параметры формы, группу, тип собираемых контактов и куда попадают данные после заполнения формы.
Формы подписки по умолчанию создаются с включенным » Double Opt-in»
Если в аккаунте есть предзаготовленное письмо о подтверждении подписки, то оно добавится к форме автоматически. Если вы сохраняете новые контакты, то необходимо добавить письмо для подтверждения контакта, которое получит человек после подписки.
Теперь нужно определиться, куда будет попадать клиент после подтверждения:
на стандартную страницу переадресации с благодарностью за подписку;
перейдет по вашему URL (при условии, что вашдомен верифицирован).
Также вы можете повысить вовлеченность, добавив приветственное письмо, которое клиент получит после подтверждения, либо целуюцепочку писем.
Для добавления Welcome-письма нажмите кнопку “Выбрать сообщение”. Если вы хотите добавить цепочку приветственных писем, то откройте вкладку “Создать приветственную серию в конструкторе сценариев” и выберите событие, которое будет запускать сценарий.
За отправку письма для подтверждения контакта или отправки Welcome-письма отвечают системные сценарии, однако при желании вы можете изменить их в любой момент.