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

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

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

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
    Пользователь agfarm1

    Добрый вечер! 

     

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

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

    Здравствуйте! Руководство по добавлению галереи миниатюр с увеличением по клику есть здесь: https://lpgenerator.zendesk.com/entries/23275911-%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9-%D1%81-%D1%83%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC-%D0%B8%D0%B7-%D0%BC%D0%B8%D0%BD%D0%B8%D0%B0%D1%82%D1%8E%D1%80%D1%8B-%D0%BF%D0%BE-%D0%BA%D0%BB%D0%B8%D0%BA%D1%83

    Руководство по добавлению галереи с увеличением по клику с “пролистыванием” (слайдером) и реализации возможности добавления двух и более галерей на целевой странице есть здесь: https://lpgenerator.zendesk.com/entries/24947053-%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F-%D1%81-%D1%83%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC-%D0%BF%D0%BE-%D0%BA%D0%BB%D0%B8%D0%BA%D1%83-%D1%81-%D0%BF%D1%80%D0%BE%D0%BB%D0%B8%D1%81%D1%82%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC-%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80%D0%BE%D0%BC-%D0%92%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B4%D0%B2%D1%83%D1%85-%D0%B8-%D0%B1%D0%BE%D0%BB%D0%B5%D0%B5-%D0%B3%D0%B0%D0%BB%D0%B5%D1%80%D0%B5

    Будут проблемы с интеграцией, пишите. Не забудьте указать страницу, куда Вы пытались интегрировать код.

     

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

    Еще раз здравствуйте!

    Как настроить оповещение о лидах на несколько ящиков?

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

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

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

    Если требуется настроить отправку оповещений о новых лидах с данными формы на разные e-mail с разных страниц, то инструкция есть тут: https://lpgenerator.zendesk.com/entries/21990271-e-mail.

  • Avatar
    Елена

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

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

    Здравствуйте, Елена! Пожалуйста, пришлите ссылку на страницу в редакторе, проверим настройки лид-формы.

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

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

    Возможно, также что поддомен для страницы благодарности Вы привязали недавно и еще не везде успел обновиться кеш записей DNS. Подождите, когда пройдет не менее 48 часов с момента привязки поддомена.

  • Avatar
    Владимир Елизаров

    Как добавить свой шрифт?

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

    Здравствуйте, Владимир! 

    Шрифты нужно подключать как стили через скрипты внутри тега .

    Пример реализации есть тут: http://www.xiper.net/collect/html-and-css-tricks/typographics/font-face-non-standart-fonts-on-css.html

    Своими силами можно сделать следующее:

    1. Через Google WebFonts: http://www.google.com/webfonts

    Выбираем нужный шрифт. Нажимаем QuickUse.

    Получаем ссылку вида: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:

    Добавляем ее через "Скрипты" в .

    Для текста в исходнике указываем свойство font-family:Gabriela;

    ===

    1. Через http://webfont.ru

    Выбираем нужный шрифт. Нажимаем кнопку "Получить шрифт"

    Получаем ссылку вида: @im * port "http://webfonts.ru/import/alexander.css";

    Добавляем ее через "Скрипты" в заключив строчку в теги .

    Например:

    @im * port "http://webfonts.ru/import/alexander.css";

    Для текста в исходнике указываем свойство font-family: alexander;

  • Avatar
    Пользователь delf-mariy

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

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

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

  • Avatar
    Владимир

    Добрый день! Появилась следующая проблема: я использовал поддомен promo.pera-design.ru на одном аккаунте, затем, удалив страницу на нем, создал новую с намерением использовать этот же поддомен, так как он освободился. Но, к сожалению, lp generator сообщает об ошибке, что этот домен уже используется. Как решить эту проблему?

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

    Здравствуйте, Владимир! Судя по всему, Вы уже успешно перенесли страницу на домен. Чтобы не возникало таких проблем, сначала старую страницу переносите на другой домен или на наш тестовый домен, тогда сообщения об ошибке не будет.

  • Avatar
    Владимир

    Да, спасибо большое! Еще есть вопрос: можно ли настроить оповещения о новых лидах по СМС на несколько номеров?

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

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

  • Avatar
    Владимир

    Доброе утро! Загрузил фавикон, но отображается ваше лого. promo.pera-design.ru

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

    Здравствуйте, Владимир!

    Чтобы сменить фавикон на определенной странице, добавьте следующий код в "Скрипты" внутрь тега :

    где "URL изображения" - это ссылка на нужное Вам изображение.

    Руководство по смене фавикона для всех страниц, расположенных на одном определенном домене, есть здесь: http://lpgenerator.ru/blog/2013/05/25/avtomaticheskaya-zagruzka-favikona-na-lendingah-lpgenerator/

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

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

    Использую шаблон, который у вас указан слева в баннере вот на этой странице. Там всего одна кнопка. По нажатию на неё хочу, чтобы открывалась всплывающая лид-форма. Такое возможно? http://lpgenerator.ru/landing-page-templates/
    Сейчас на кнопку вижу только возможность навесить гиперссылку на url.

    Спасибо.

  • Avatar
    Лина Малькова
  • Avatar
    Владимир

    Добрый вечер!

    Пожалуйста, объясните подробнее процесс подключения стороннего шрифта. В предыдущем посте об этом все ясно кроме фразы "Для текста в исходнике указываем свойство ...". Спасибо!

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

    Здравствуйте, Владимир! После добавления ссылки в скрипты, открываете тестовый редактор, нажимаете "Исходник" и прописываете название шрифта в свойствах: http://awesomescreenshot.com/0131tvug8b

    После чего пересохраняете страницу. Увидеть изменения можно будет при просмотре страницы.

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

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

    Такой ещё вопрос. Мне в это всплывающее окно необходимо встроить помимо полей формы небольшой поясняющий текст. http://prntscr.com/1xffep

    Такое возможно?

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

    Здравствуйте! Перед блоками form и form_button добавьте еще одну строку, в которой укажите id нужного блока: http://awesomescreenshot.com/0061u0ht5a

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

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

    Тем не менее спасибо за оперативную поддержку!

  • Avatar
    Андрей

    Добрый день! Скажите пожалуйста, можно ли как нибудь поменять цвет кнопки? Сама кнопка нравится, но нужна черного цвета..., в предложенных нет такого. Заранее большое спасибо! 

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

    Здравствуйте, Андрей! Скорее всего фон кнопки создан с помощью изображения, поэтому чтобы его изменить, удалите изображение: в меню справа нажмите "Очистить": http://awesomescreenshot.com/0221v0xp02    Далее можно будет изменить фон кнопки, либо выбрав нужный цвет, либо загрузив фон через галерею как изображение с Вашего компьютера.

  • Avatar
    Анна Волгина

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

  • Avatar
    Максим Гуйван

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

    Реализовать автоматическое заполнение полей формы возможно. Для более подробного и точного решения задачи нам понадобится больше деталей.

    Напишите, пожалуйста, письмо на адрес support@lpgenerator.ru с подробным описанием того, что нужно сделать и на какой из страниц.

  • Avatar
    Александр

    Добрый день! Вопрос уже поднимался, но 10 месяцев назад и возможно что-то изменилось. Использую динамический текст и хотелось бы в рассылке о лиде видеть на что именно пришел запрос. Есть ли возможность каким либо образом настроить в дополнение к информации с заполненных полей лид-формы рассылку значений динамических переменных или текущий адрес страницы (в котором динамические параметры заполнены)

    Спасибо.