База знаний
по возможностям платформы

Настройка и возможности лид-формы

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

1) Создайте целевую страницу или выберите уже существующую.
2) Войдите в редактор LPgenerator.
3) Чтобы создать новую форму выберите в основном меню инструмент “Форма”:

4) Чтобы отредактировать существующую форму кликните по ней 2 раза.

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

Создание полей

Выберите нужные готовые поля (“Email”, “Фамилия”, “Возраст”, “Имя”, “Телефон”, ”Дата” и “Url”) из списка слева:

При необходимости создайте собственное поле, выбрав “Текст”:

Обратите внимание: готовые поля “Email” и “Url” всегда будет делать проверку вводимой информации на валидность. Если вы хотите сделать проверку “необязательной”, воспользуйтесь кнопкой “Текст”!

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

Для каждого поля формы можно задавать индивидуальную конфигурацию, воспользовавшись меню “Настройки поля”.

Для полей “Имя”, “Фамилия”, “Возраст”, “Email”, “Дата” и “Url” вы можете задать следующие конфигурации:

  1. Название поля.
  2. Установка поля как “обязательного”.
  3. Mapping (для активации данной опции укажите название поля на английском языке).
  4. Вы можете установить, будут ли данные этого поля попадать в CRM-систему.
  5. Задать название данного поля в CRM-системе (эта удобная функция позволит вам получать информацию в CRM так, как вам удобно - например, если название поля лид-формы звучит как "введите ваш email", то можно просто задать название "email", и таким образом систематизировать и облегчить поиск и обработку лидов непосредственно в CRM).

Такие настройки актуальны и для произвольных полей, созданных при помощи инструмента “Текст”.

Маска ввода для поля "Телефон".

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

Вместо девяток посетитель увидит в поле пробелы вида (___) ___-___-__

Дополнительные элементы формы

Более тонкими настройками теперь обладают такие элементы формы, как “Многострочный текст” (Textarea), “Флажок” (Checkbox), “Радио кнопка” (Radio button) и “Выпадающий список” (Select).

Для поля “Многострочный текст” (Textarea) вы можете задать высоту в пикселях и таким образом регулировать высоту этого блока:

Для элементов “Радио кнопка” и “Флажок” - варианты выбора и расположение (1, 2 или 3 колонки):

Внимание! После изменения вариантов не забудьте нажать на кнопку “Сохранить варианты”.

Прерывание формы (Multi Step, “мультистеп”, многошаговая форма)

Это совершенно уникальная функция оптимизации конверсии целевых страниц, которую мы назвали “прерывание формы”, или “мультистеп”.

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

Обычно мультистеп представлен одним полем на каждом этапе.

Для того, чтобы воспользоваться опцией “мультистеп”:

1. Добавьте в форму все необходимые поля.
2. Нажмите кнопку “Прерывание формы”:

3. В поле “Надпись на кнопке” введите текст, который будет отображаться на ней (например “Далее”, “Перейти к следующему шагу” и т. д.)

4. Разместите линию прерывания после того поля, которое будет этапом заполнения, просто перетащив элемент. Добавьте столько линий прерывания, сколько этапов вам необходимо.

Функциональные настройки формы

В редакторе форм от LPgenerator вы можете сразу установить результат формы (“Действие”). Резульат формы - это то, что посетитель увидит после отправки лида. Результат может быть следующий:

  • Переход на URL (где в соответствующем поле нужно установить ссылку на страницу - куда будет происходить редирект - начинающуюся с http://).
  • Страница благодарности (которая выбирается из выпадающего списка прямо в редакторе).
  • Показать сообщение (где в соответствующем поле нужно указать сообщение, которое будет видеть пользователь, отправивший лид).

Кроме того, в настройках формы можно задать положение меток полей: (сверху, слева, внутри):

Оптимальнее всего располагать метки внутри полей формы, чтобы сэкономить место на лендинге.

Паттерн

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

Для этого:

1) Войдите в редактор и перейдите в основное меню “Настройки формы”.
2) В пункте “Паттерн” выберите 1 колонку, 2 колонки либо же расположите все поля в один ряд:

3) При выборе двух колонок установите положение полей, просто перетащив их.

Внимание! Перетаскивайте поля во вторую колонку без спешки!

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

Примеры форм, которые можно сделать в редакторе LPgenerator:

Протестировать эти формы в действии вы можете на лендингах, представленных в нашем магазине.

Настройка внешнего вида формы

После того как форма готова, вы можете приступать к редактированию ее внешнего вида, а также редактированию кнопки (изменению ее внешнего вида и надписи на ней).

Для того, чтобы изменить внешний вид формы:

1) Кликните 1 раз по ней в редакторе.
2) Справа, в меню “Свойства”, настройте соответствующие установки (“Стиль полей”, “Стиль меток”, “Результат формы” и т. д.):

Цвет текста меток

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

1) В редакторе кликните по форме.
2) В разделе "Стиль меток" меню "Свойства" выберите нужный цвет:

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

Настройки кнопки

Для того, чтобы изменить текст на кнопке формы:

1) В редакторе дважды кликните по кнопке.
2) В появившемся окне введите необходимый текст:


3) Сохраните изменения.

Для того, чтобы изменить внешний вид кнопки:

1) Кликните по ней в редакторе.
2) В меню “Свойства” настройте соответствующие установки (“Фон”, “Стиль шрифта”, “Стиль границы” и т. д.):

Напоминаем, что вы можете выбрать готовую кнопку из галереи, ссылка на которую размещается в свойстве “Фон”.

Свойства кнопки “Активный” и “Наведенный”.

Они позволяют установить эффект реакции кнопки на клик по ней. Для этого достаточно установить нужные изображения из галереи для состояний «Активный» (так будет выглядеть кнопка, когда ее увидит посетитель целевой страницы) и “Наведенный” (так будет выглядеть кнопка, когда на нее наведен курсор):

Напоминаем — в галерее изображений вы сможете найти фон для кнопок практически любых расцветок:

Фон для формы

Создается с помощью инструмента «Блок». Блок в свою очередь заливается цветом или фоновой картинкой.

Скругление границ элементов

Для того, чтобы "скруглить" края:

1) Кликните в редакторе 1 раз по элементу, который требуется изменить.



2) В свойствах “Стиль границы” задайте значение радиуса в поле “Скругление”:



3) Сохраните изменения.

Настройка выделения обязательного поля формы при фокусе

Поле подсвечивается когда посетитель кликает по нему.

“По умолчанию” цвет подсветки будет голубым (#53a7ec). 

Для того, чтобы изменить подсветку фокуса: 

1) В редакторе кликните по полям формы.
2) В меню “Свойства” найдите “Стиль полей” и нажмите на кнопку выбора цвета напротив пункта “Фокус”:



3) Найдите нужный цвет в палитре и подтвердите выбор нажатием кнопки “Выбрать”.
4) Сохраните изменения:

На уже существующих страницах опция подсветки фокуса появится после пересохранения! Просто войдите в редактор и нажмите кнопку “Сохранить” в основном меню редактора, чтобы кеш страницы обновился.

Настройка стиля радио-кнопок и флажков

Для таких полей формы, как “Радио-кнопка” и “Флажок”, Вы можете настроить отдельные стили отображения текста вариантов, воспользовавшись соответствующими настройками формы. Для редактирования доступны: начертание текста и шрифт, размер шрифта и цвет:

В результате Вы сможете придать акцент этим полям в лид-форме, выделив их на фоне остальных полей:

Оповещение об ошибке заполнения формы

Сообщения об ошибках при попытке отправки неправильно заполненной формы (с пустыми «обязательными» полями) отображаются в виде стандартного предупреждающего окна браузера («Alert»). Изменить его внешний вид нельзя.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 4 из 4
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Пользователь mayosx

    Здравствуйте. Возникла проблема при добавлении поля типа "многострочный текст".

    Метка поля "комментарий" длинная, и заползает на само поле, и нигде в редакторе форм не получается это исправить. Как быть? Тупо укоротить слово, или что?

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

  • Avatar
    Администратор

    Здравствуйте!

    Откройте, пожалуйста, тикет через форму обратной связи http://lpgenerator.ru/help/. Укажите ссылку на страницу в редакторе. Проверим на месте.

  • Avatar
    Пользователь batalin.ovb

    Здравствуйте! Как сделать чтобы например  в поле "Имя" (или в любом другом текстовом поле)   было уже автоматически вписано какое либо название. Что бы оставалось только указать телефон или  mail в следующем поле?

    П.С. ОЧЕНЬ нужно

  • Avatar
    Григорий

    Привет.

    Подскажите, пожалауйста, каким кодом можно передать значения полей маппинга в текст на странице?

    Спасибо.

  • Avatar
    Лина Малькова

    Здравствуйте, Григорий!

    Руководство по реализации этой опции показано здесь на примере страниц благодарности: https://lpgenerator.zendesk.com/entries/22019388-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BD%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5-%D0%B1%D0%BB%D0%B0%D0%B3%D0%BE%D0%B4%D0%B0%D1%80%D0%BD%D0%BE%D1%81%D1%82%D0%B8

  • Avatar
    Артур Тлимахов

    Здравствуйте!
    Подскажите вопрас, при нажатии на кнопку отправить письмо на почту не получаю?
    Как исправить проблему.
    LP - http://auto.bx-shop.ru/ (http://auto.bx-shop.ru/)

  • Avatar
    Лина Малькова

    Здравствуйте, Артур!

    Скорее всего дело в том, что на указанных страницах кнопка не связана с лид-формой. 
    Нужно создать лид-форму заново с помощью инструмента "Форма" в редакторе, кнопка связанная с формой создается при этом автоматически, она имеет вид: http://awesomescreenshot.com/06d1hp5710 (без полей для ссылок и т.п.) 
    Внешний вид формы и ее кнопки можно настроить в меню справа.

  • Avatar
    Анна Маренная

    Какие функции у кнопки "узнать больше"??? Много текста туда не входит.

  • Avatar
    Лина Малькова

    Здравствуйте! Кнопки обычно используются для перехода на другую страницу, например, по кнопке "Узнать больше" пользователь может перейти на страницу товара с его более подробным описанием.

    Чтобы настроить такую кнопку, дважды кликните по ней и вставьте ссылку на нужную страницу.

  • Avatar
    Анна Маренная

    Мне не нужна такая кнопка, её переделать в "закажите звонок" нельзя?..

  • Avatar
    Лина Малькова

    Можно, конечно. По двойному клику измените название кнопки, в меню справа настройте ее внешний вид и воспользуйтесь руководством по настройке всплывающей лид-формы: https://lpgenerator.zendesk.com/entries/22231063-%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D0%B2%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D1%83%D1%8E-%D1%84%D0%BE%D1%80%D0%BC%D1%83-PopUp-%D1%84%D0%BE%D1%80%D0%BC%D1%83-

  • Avatar
    Пользователь gps-spb

    Здравствуйте, можно ли настроить пересылку данных с разных форм на разные mail адреса?

  • Avatar
    Лина Малькова

    Здравствуйте! С разных форм на одной странице - нет. Но можно настроить  отправку оповещений о новых лидах на разные e-mail с разных страниц по  инструкции  тут: https://lpgenerator.zendesk.com/entries/21990271-e-mail.

  • Avatar
    Даниил Шведов

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

  • Avatar
    Лина Малькова

    Здравствуйте, Даниил! К сожалению, средствами редактора это сделать нельзя. Как вариант, попробуйте сделать две разных формы для кнопок "Купить" и "Продать".

  • Avatar
    Roman Khymych

    Здравствуйте!

    Как изменить - оповещение об ошибке заполнения формы? (мен на анг. нужно)

  • Avatar
    Лина Малькова

    Здравствуйте! К сожалению, текст данного оповещения изменить невозможно.

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

  • Avatar
    Пользователь romaha08

    Добрый день!

    Подскажите как можно настроить интеграцию с сервисами рассылки.

    Мне нужно чтобы при добавлении контакта в список рассылки, этому контакту не приходило сообщение с подтверждением на подписку,а контакт считался уже подтвержденным. Это можно реализовать в API UniSender например,но доступа к нему со страницы нет. Как можно решить эту задачу на стороне страницы?

  • Avatar
    Лина Малькова

    Здравствуйте! К сожалению, при интеграции по API отключить письма о подтверждении подписки нельзя. На данный момент такая задача стоит перед нашими разработчиками, но когда решение будет найдено - пока неизвестно. Следите за новостями в нашем блоге.

  • Avatar
    Олег

    Добрый день! Хочу запрограмировать форму для распродажи определённых видов товара.

    Примерно будет выглядеть это так: картинка с изображением товара. напротив форма, куда человек вводит Имя Фамилию, город, адрес, телефон, e-mail, колличество покупаемого товара и нажимает купить. Нужно, чтобы приходило сообщение о колличестве заказанного конкретным человеком товара.

    как это сделать?

    Да!

    Так же хочется, чтобы полях других продуктов автоматически заполнялись те строки, которые заполняет покупатель!

  • Avatar
    Лина Малькова

    Здравствуйте, Олег! Можно сделать специальную текстовую графу и назвать ее, например, "количество товара", можно сделать выпадающий список с вариантами, из которых пользователь сможет выбрать нужное ему количество.

    Автозаполнение форм можно реализовать при работе с подписными базами, как это описано здесь: http://lpgenerator.ru/blog/2013/06/27/avtozapolnenie-lid-form-peredovaya-tehnika-email-marketinga/ (http://lpgenerator.ru/blog/2013/06/27/avtozapolnenie-lid-form-peredovaya-tehnika-email-marketinga/)

  • Avatar
    Пользователь B.kirichek

    Здравствуйте. у меня к вам вопрос. настроил всплывающее окно при нажатии на кнопку "заказать звонок". все вроде бы ок. только после заполнения формы и нажатия на кнопку отправить форма не закрывается. как это исправить? спасибо за ответ

  • Avatar
    Лина Малькова

    Здравствуйте!

    Автоматическое закрытие окна невозможно сделать технически, т. к. подобная настройка может повредить отправке данных с формы.

    Можете настроить результатом формы "Переход по URL" или переход на страницу благодарности. Тогда, после отправки лида, будет происходить редирект на какую-то страницу (например, на основной сайт или страницу благодарности).

    Руководство по настройке страниц благодарности есть здесь: https://lpgenerator.zendesk.com/entries/21994992-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86-%D0%B1%D0%BB%D0%B0%D0%B3%D0%BE%D0%B4%D0%B0%D1%80%D0%BD%D0%BE%D1%81%D1%82%D0%B8.

  • Avatar
    Пользователь agfarm1

    Здравствуйте! Подскажите, как настроить оповещение о заполнении формы на почту? Страница сделана по шаблону

  • Avatar
    Лина Малькова

    Здравствуйте!

    Данные с лид формы отправляются на e-mail автоматически в оповещении о вновь поступившем лиде, а также поступают в Ваш CRM-центр на вкладке "Лиды". Сейчас у Вас настроена отправка оповещений на тот адрес, на который зарегистрирован аккаунт.

    Если Вам необходимо чтобы оповещения приходили на другой ящик, то измените адрес в поле "Электронная почта для оповещения о лидах" и подтвердите e-mail, перейдя по ссылке в письме, отправленном на основной почтовый ящик.

  • Avatar
    Алексей

    Добрый день! Нужно сделать кнопку, при нажатии на которую будет открываться лидформа. Как это сделать? И еще вопрос: на страницу нужно вставить ссылку на политику конфиденциальности при обработке персональных данных, и чтобы при нажатии на эту ссылку открывалось всплывающее окно с текстом

  • Avatar
    Пользователь agfarm1

    Добрый день! Еще один вопрос. я купил домен типа xxx.ru. В настройке сделанной страницы указал promo.xxx,ru. Правильно ли это? Или нужно покупать отдельный домен?

  • Avatar
    Лина Малькова

    Здравствуйте!

    Алексей, для настройки всплывающей формы используйте это руководство: https://lpgenerator.zendesk.com/entries/22231063   Для создания всплывающего текстового окна руководство есть здесь: https://lpgenerator.zendesk.com/entries/25015387

    Пользователь agfarm1 (https://lpgenerator.zendesk.com/users/473352088), Вы можете использовать для привязки как основной домен вида xxx.ru (если на нем нет сайта), так и поддомен promo.xxx.ru.

  • Avatar
    Егор Михалев

    Здравствуйте! подскажите пожалуйста, возможно ли в лид форме сделать так что бы пользователь мог не только ввести свои контактные данные, но и прикрепить фотографию или картинку? и что бы на мою почту пришли данные вместе с его картинкой или фото?

  • Avatar
    Лина Малькова

    Здравствуйте!

    Для этого нужно провести интеграцию страницы с сервисом DropBox.

    Руководство по интеграции с DropBox для возможности загрузки файлов есть здесь: http://lpgenerator.ru/blog/2013/06/24/integraciya-s-dropbox-vozmozhnost-zagruzki-fajlov-cherez-lid-formu-celevyh-stranic-lpgenerator/

На базе технологии Zendesk