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

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

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

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
    Максим Гуйван

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

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

    Либо, как вариант, если в качестве динамической переменной вы используете параметр UTM-ссылки, например, utm_term, - тогда его значение будет совпадать с вашим динамическим текстом.

    Таким образом, при настроенных utm-метках, совпадающих с динамическим тестом, в письмо с оповещением о лиде также попадёт информация о ключевой фразе.

    Подробнее о использовании динамического текста с utm-метками вы можете узнать из нашей статьи:
    http://lpgenerator.ru/blog/2014/06/19/multilending-ili-dinamicheskij-tekst-novoe-obnovlenie-platformy-lpgenerator/

    Если понадобятся дополнительные сведения — свяжитесь с нашей службой поддержки любым удобным способом, например, по почте support@lpgenerator.ru

  • Avatar
    Татьяна Т

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

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

    Здравствуйте, Татьяна!

    Выделите кнопку поп-ап окна, которое вы хотите переименовать, затем в правой части редактора вы увидите номер элемента, например, попап 12. Запомните этот номер.

    Далее откройте панель свойств в левой части редактора - она открывается по нажатию на маленький треугольник у левой границы окна редактора.

    Когда откроется перечень всех элементов страницы - нажмите сочетание CTRL+F для поиска по странице и введите номер элемента, который вы запомнили.

    В списке элементов вы увидите, как подсветится нужный вам номер элемента. Дважды щёлкните, чтобы переименовать и нажмите иконку сохранения нового названия для кнопки. Не забудьте сохранить страницу.

    Ориентируйтесь на скриншот по ссылке: https://docs.google.com/file/d/0B9XxnU8SufZ9Wk5WbW9hcEFaS0E/edit?usp=drivesdk
    Либо можете взять за пример действия из статьи о Карте целей конверсии, пункты 10 и далее до конца статьи:
    http://lpgenerator.ru/blog/2014/07/11/evolyuciya-statistiki-i-analitiki-lpgenerator-karta-celej-konversii/

  • Avatar
    Анастасия

    Скажите, а как сделать не две формы рядом, а три? Чтобы они горизонтально шли...? Очень надо..как реализовать)?

  • Avatar
    Алена Балакина

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

    Если Вы имеете ввиду создание полей формы, которые будут расположены в один ряд, то обновленный редактор формы позволяет это сделать (и даже разместить более трех полей в ряд): http://prntscr.com/57vp7t

    Кликните по инструменту "Форма", далее нажмите "Настройки формы" и в поле "Паттерн" поставьте значение "в ряд". Скриншот-подсказка: http://prntscr.com/57voeo

  • Avatar
    Альмир

    Добрый день! Я не могу поменять текст сообшения, который появляется после заполнения попапа... Как поменять его?

  • Avatar
    Борис Колосов

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

    Изменить текст можно в настройках самого Попап, как указано на скриншоте: http://prntscr.com/5p45sq

  • Avatar
    Альмир

    а как поменять цвет этого сообщения?

  • Avatar
    Борис Колосов

    Альмир, необходимо вставить через инструмент "Скрипты" в положении "внутри тега HEAD" следующий скрипт:

    <style>
    .confirmation {
    color: #fff !important;
    }
    </style>

    #fff - идентификатор цвета. Его можно подобрать и скопировать индивидуально при выборе цвета для любого блока в редакторе.

  • Avatar
    Альмир

    Спасибо Борис!

  • Avatar
    Ольга

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

  • Avatar
    Алена Балакина

    Здравствуйте, Ольга!

    Стандартными средствами не получится реализовать отправку письма с файлом.
    Есть вариант скачивать файл при нажатии на кнопку.

    Обратитесь к нам по адресу support@lpgenerator.ru и опишите подробнее Вашу задачу - постараемся найти решение.

  • Avatar
    Сергей

    Добрый вечер!
    В развитие предыдущего ответа: а как осуществить вариант со скачиванием файла при нажатии на кнопку?

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

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

    Выберите лид-форму, укажите для лид-формы вариант "переход по URL" - как на скриншоте: https://lpgenerator.zendesk.com/hc/ru/article_attachments/201857317/image24.png
    И в качестве URL вставьте прямую ссылку на скачивание файла.

    Если возникнут сложности - пишите нам на support@lpgenerator.ru - будем рады подсказать подробнее.

  • Avatar
    Сергей

    Так и сделал, но почему-то при нажатии кнопки мне выдается страница 404 LPGenerator'а, а скачивания не происходит. Прямую ссылку на скачивание файла делал по этой статье https://lpgenerator.zendesk.com/hc/ru/articles/206254377-%D0%9A%D0%B0%D0%BA-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D1%83-%D0%B4%D0%BB%D1%8F-%D1%81%D0%BA%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D1%84%D0%B0%D0%B9%D0%BB%D0%B0-%D0%9A%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0-%D0%A1%D0%BA%D0%B0%D1%87%D0%B0%D1%82%D1%8C-%D1%84%D0%B0%D0%B9%D0%BB-%D0%BD%D0%B0-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3%D0%B5- .

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

    Сергей!

    Напишите, пожалуйста, нам в службу поддержки - не видя всей ситуации очень сложно догадаться, в чём ошибка.
    Напишите нам со своего регистрационного e-mail на support@lpgenerator.ru и пришлите ссылку на редактор страницы, а также ссылку на файл - мы изучим и сможем детально и точно сказать, в чём была причина и как будет корректно. Без этих данных мы можем долго строить беспочвенные предположения и не продвинуться к решению