Как создать форму подписки в онлайн конструкторе веб-форм FormDesigner и интегрировать ее с Mailigen

Сегодня вы узнаете, как быстро создать форму подписки в онлайн конструктор веб-форм FormDesigner и настроить интеграцию с сервисом email рассылок Mailigen.

Все ваши действия можно разделить на три простых шага:

1. Создание формы подписки
2. Дизайн
3. Настройка модуля

Для начала зарегистрируйтесь на сайте FormDesigner и войдите в личный кабинет конструктора веб-форм.

Создание формы подписки

Изначально вы оказываетесь на главной странице конструктора:

Нажмите на кнопку “Создать форму”. Должно открыться всплывающее окно:

Назовите вашу будущую форму и нажимаете на кнопку “Создать”. Откроется страница конструктора форм. Вам предложат добавить необходимые элементы:

В обычной форме подписки два элемента: поле для email адреса и для имени. Добавляйте первое текстовое поле в форму:

Редактируйте это поле и измените название. Важно сделать это поле обязательным для заполнения. Для этого надо просто навести курсор на иконку редактирования:

Теперь добавляем в форму специальный элемент для ввода e-mail адреса:

ВАЖНО! Не перепутайте форму «E-mail адрес» с обычным текстовым полем. Это необходимо, чтобы форма автоматически проверила формат ввода e-mail адреса.

Можно активировать “Уникальное поле”. Это не позволит вводить один и тот же email несколько раз.

Дизайн

Необходимый минимум вы создали, теперь можно заняться внешним видом формы. Для этого переходите в “Тема оформления”:

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

Для изменения темы надо кликнуть по кнопке «Выбрать тему»:

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

Например, цвет фона кнопки “Отправить”:

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

Настройка модуля

Настало время подключить модуль Mailigen. Это нужно для того, чтобы все данные из формы автоматически попадали в список контактов Mailigen. Для этого переходите во вкладку «Модули» и ищем там “Mailigen”:

Наводите курсор на этот модуль и жмите «Добавить». Перед вами появится окно настроек модуля:

Здесь введите ключ API на сервисе Mailigen и синхронизируйте. Если данные введены правильно, то откроется основное окно с настройками модуля:

Сначала стоит выбрать список адресов, в который будут попадать новые пользователи после заполнения формы. Затем выбирайте элемент, который будет содержать данные о подписчике (имя, email, телефон). Обязательны для заполнения поля с e-mail адресом или поля, для ввода номера телефона. Форма с именем по желанию может остаться пустой.

Если у вас есть ещё какие-либо поля, информация с которых должна попадать в Mailigen, то вам следует перейти во вкладку «Дополнительные параметры»:

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

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

Размещение формы на сайте

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

У нас есть несколько вариантов размещения формы на сайте. Список всех вариантов выводится в колонке слева.

Для встраивания формы в нужное место на странице рекомендуем использовать javascript код для вставки на сайт. Если у вас нет возможности использовать javascript код, то тогда необходимо использовать iframe, но он имеет несколько минусов:

• Не передаются utm метки
• Не работает автонастройка высоты формы (может появляться скролл)

Также у нас есть возможности выводить форму в виде всплывающего окна . Доступно несколько вариантов:

• Всплывающее окно — клик по ссылке
• Всплывающее окно — клик по кнопке
• Всплывающее окно — ушко
• Всплывающее окно — автопоказ

Для каждого типа всплывающего окна вы можете настроить свои параметры отображения. Для этого под каждым типом всплывающего окна есть кнопки «Просмотр» и «Настроить».

Если ваш сайт работает на wordpress, то для него у нас есть специальный плагин , который позволяет встраивать форму в нужное место страницы при помощи специального шорткода.

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