Scroll

MotoCMS 3

MotoCMS eCommerce

MotoCMS Blog

Moto4

Welcome to our LiveChat! Please press "Start Chat" button to proceed

Start Chat

Расширенная форма связи

1. Общая информация
1.1 Настройки формы связи
1.1.1 Редактировать
1.1.2 Отправлять к
1.1.3 Тема
1.1.4 Редактировать сообщения
1.1.5 События
1.1.6 Действие после отправки
2. Элементы формы

2.1. Заголовок
2.2. Текстовое поле
2.3. Текстовая область
2.4. Выпадающий список
2.5. Флажок
2.6. Переключатель
2.7. Файл
2.8. Кнопка отправки
2.9. Сообщение о статусе
2.10. reCAPTCHA

Внимание: Вы можете использовать этот виджет в Панели управления версии выше 3.2.5 (старые версии продукта не поддерживают этот плагин).
Плагин Расширенной формы связи - это специальный виджет, который позволяет создавать  выдающиеся, сложные и уникальные формы связи с огромным количеством функций. Вы можете найти его во вкладке Страницы - Виджеты - Базовые. Расширенная форма связи предустановлена в некоторые MotoCMS 3 шаблоны, а также может быть приобретена отдельно для любого MotoCMS 3 шаблона по этой прямой ссылке.
Screenshot_2.png
Плагин Расширенной формы связи разделен на 2 основные вкладки: "Настройки" и "Дизайн".
Screenshot_1.png
"Настройки" состоит из функций "Редактировать""Отправлять к""Редактировать сообщения".
Screenshot_2.png
Нажмите кнопку "Редактировать", чтобы добавить разные виды элементов формы в форму связи.
Screenshot_3.png 
!Важно! После нажатия на эту кнопку вся рабочая область сайта, кроме виджета Расширенной формы связи, будет затемнена. Пожалуйста, убедитесь в выборе полей, которые Вы хотите отредактировать, среди полей формы на странице для просмотра настроек каждого элемента.
Screenshot_5.png
Вы можете использовать следующие элементы формы: Заголовок, Текстовое поле, Текстовая область, Выпадающий список, Флажок, Переключатель, Файл, Кнопка отправки, Сообщение о статусе (отправки), Recaptcha.
Screenshot_6.png
"Заголовок" - это элемент формы, который позволяет добавить заголовки полей. Обратите внимание: заголовок не будет присутствовать в сообщении на электронной почте.
Вкладка "Свойства" позволяет ввести заголовок поля формы в поле "Текст", после чего настроить стиль текста в поле "Стиль текста".
Screenshot_8.png
Блок "Отображение" имеет следующие типичные функции: "Отступы""Устройства", "Выравнивание".
Screenshot_9.png
"Текстовое поле" - это элемент формы, который позволяет добавлять поле ввода короткой информации: персональные детали, электронную почту и т.п.
Screenshot_11.png
Блок "Свойства" имеет следующие функции: "Название", "Плейсхолдер", "Тип", "Иконка".
Screenshot_12.png
"Название" - это функция, позволяющая задать уникальный идентификатор (ключ) для значения, введенного посетителем сайта в это поле. Этот идентификатор будет отображен в сообщении на электронную почту. Пример: если уникальное значение поля "Название" (ключа)  "Являетесь ли Вы пользователем MotoCMS?" и посетитель сайта вводит: "Да", то Вы получите следующую строку в письме на электронную почту: 
Являетесь ли Вы пользователем MotoCMS?: Да
Screenshot_13.png
"Плейсхолдер" - это функция, позволяющая Вам задать текст, отображаемый внутри поля на странице сайта до начала ввода пользователем текста в это поле. Другими словами, заголовок поля.
Screenshot_14.png
"Тип" - это поле настройки конкретного типа данных, вводимых в поле - это может быть текст, номер, адрес электронной почты, телефон либо URL ссылка. Тип допустимых данных берется со структуры веб-браузера и имеет его индикаторы валидации. Значение типа валидации задается только для выделенного поля поле. Вы можете задать лишь один Тип валидации для одного Текстового поля.
Screenshot_15.png
"Иконка" - это функция, позволяющая задать иконку для этого Текстового поля.
Screenshot_16.pngБлок "Описание" позволяет Вам устанавливать описание под каждым элементом "Текстовое поле" в качестве подсказки для лучшего понимания назначения поля ввода. Вы также можете настроить его выравнивание и просмотреть как выглядит "Описание" на разных устройствах.
Screenshot_1.png
"Валидация" - это функция, позволяющая Вам настроить проверку введенной в текстовое поле информации на соответствие предполагаемой структуре: текст, число, адрес электронной почты, номер телефона, URL ссылка. Вы можете задать "Обязательное поле" и/или Минимальную либо Максимальную длину/значение.
Screenshot_2.png
Блок "Отображение" имеет типичную функцию: "Отступы".
Screenshot_3.png
"Текстовая область" - это элемент формы, который позволяет добавить поле, в которое посетитель может ввести более детальную информацию.
Screenshot_1.png
Блок "Свойства" состоит из следующих функций: "Название", "Плейсхолдер", "Высота".
Screenshot_2.png
"Название" - это функция, позволяющая задать уникальный идентификатор (ключ) для значения, введенного посетителем сайта в это поле. Этот идентификатор будет отображен в сообщении на электронную почту. Пример: если уникальное значение поля "Название" (ключа)  "Являетесь ли Вы пользователем MotoCMS?" и посетитель сайта вводит: "Да", то Вы получите следующую строку в письме на электронную почту: 
Являетесь ли Вы пользователем MotoCMS?: Да
Screenshot_3.png
"Плейсхолдер" - это функция, позволяющая Вам задать текст, отображаемый внутри поля на странице сайта до начала ввода пользователем текста в это поле. Другими словами, заголовок поля.
Screenshot_4.png
"Высота" - это функция, позволяющая Вам настроить высоту поля ввода элемента "Текстовая область" в пикселях для конкретного типа устройств, отображенных над полем выбора значения высоты.
Screenshot_5.png 
Блок "Описание" позволяем Вам установить описание под каждым элементом "Текстовая область", которое будет выступать своего рода подсказкой о назначении поля. Вы также можете настроить стиль текста блока "Описание", а также Выравнивание для конкретных типов устройств, отображенных над функцией "Выравнивание".
Screenshot_6.png
"Валидация" - это функция, позволяющая Вам настроить проверку введенной в текстовое поле информации на соответствие предполагаемой структуре: текст, число, адрес электронной почты, номер телефона, URL ссылка.
Screenshot_7.png
Вы можете задать "Обязательное поле" и/или Минимальную либо Максимальную длину.
Screenshot_8.png
Блок "Отображение" имеет типичную функции: "Отступы".
Screenshot_9.png
"Выпадающий список" - это элемент формы, который позволяет Вам создать выпадающий список, из которого посетитель может выбрать только одно значение в качестве ответа.
Screenshot_1.png
Блок "Свойства" состоит из следующих функций: "Название""Опции""Добавить""Обязательное поле".
Screenshot_2.png
"Название" - это функция, позволяющая задать уникальное имя (ключ) для списка опций. Этот идентификатор будет отображен перед выбранной посетителем опцией в сообщении, которое придет Вам на электронную почту.
Screenshot_3.png
Пример: если уникальное имя "Название" - "CARS" и посетитель выбирает из выпадающего списка "Toyota", то Вы получите в сообщении на электронную почту следующую строку:
CARS: Toyota (пример)Кнопка "Добавить" позволяет Вам добавить новые "Опции" для элемента формы "Выпадающий список".
Screenshot_5.png
После нажатия на кнопку "Добавить" появляется новое окно "Добавить элемент", где Вы можете задать "Значение" и "Заголовок" опции.
Screenshot_6.png
Поле "Значение" позволяет Вам задать уникальное значение выбираемой опции, которое Вы увидите в сообщении на электронной почте после Названия выпадающего списка.
Пример: если уникальное имя "Название" выпадающего списка "CARS" и пользователь выбирает опцию c Заголовком "bmw", которая имеет Значение "BMW", то Вам на почту придет сообщение со следующей строкой:
CARS: BMW (пример).
Поле "Заголовок" позволяет Вам задать уникальное название опции, отображаемое выпадающим списком и видимое посетителем на сайте.
Screenshot_7.png
После создания опции, которая имеет "Значение" и "Заголовок", Вы можете сделать эту опцию пунктом, выбранным по умолчанию, отредактировать либо удалить.
Screenshot_1.png
Позиция каждой опции может быть изменена перетаскиванием.
Screenshot_2.png
Обратите внимание: если Вам нужна опция с пустым значением, только одна опция может иметь пустое "Значение".
Функция "Обязательное поле" позволяет Вам сделать обязательным выбор какой-то опции из выпадающего списка, не разрешая отправить сообщение через расширенную форму связи не выбрав какую-либо опцию из этого выпадающего списка.
Screenshot_3.png
Блок "Отображение" имеет типичную функцию: "Отступы".
Screenshot_4.png
"Флажок" - это элемент формы, который позволяет настроить галочку (флаговую кнопку), имеющую два значения: "включено" и "выключено".
Screenshot_5.png
Блок "Свойства" состоит из следующих функций: "Название""Заголовок", ""Выбранный""Обязательное поле".
Screenshot_6.png
"Название" - это функция, которая позволяет Вам задать уникальный идентификатор и получить ключ и значение, введенное посетителем, в письме.
Screenshot_2.png
Пример: если значение уникального идентификатора "Название" задано "AGREEMENT", а посетитель поставил флажок, то Вы получите сообщение на электронную почту со следующей строкой:
AGREEMENT: Yes.
Поле "Заголовок" позволяет Вам задать уникальное описание этого элемента "Флажок", которое посетители будут видеть на сайте, но оно не будет отображено в письме на Вашей электронной почте.
Screenshot_3.png
Поля "Флажок отмечен" и "Флажок не отмечен" позволяют Вам задать текст, отображаемый в письме, которое Вы получите на Вашу электронную почту при соответствующем состоянии флажка на момент отправки сообщения посетителем сайта через Расширенную форму связи.
Screenshot_3.png
"Выбранный" и "Обязательное поле" - это функции, которые позволяют Вам сделать элемент "Флажок" выбранным по умолчанию при открытии страницы и сделать установку галочки в этом элементе "Флажок" обязательным для отправки сообщения через Расширенную форму связи.
Screenshot_11.png
Блок "Отображение" имеет следующие типичные функции: "Отступы""Устройства", "Выравнивание".
Screenshot_10.png
"Переключатель" - это элемент формы, который позволяет Вам добавить переключатель нескольких вариантов с возможностью выбрать лишь один вариант из множества.
Screenshot_1.png
Блок "Свойства" состоит из следующих функций: "Название", "Опции""Позиционирование варианта""Обязательное поле".
Screenshot_2.png
"Название" - это функция, которая позволяет Вам задать уникальный идентификатор этого Переключателя и получить ключ и значение, введенное посетителем, в письме.
Screenshot_3.png
Пример: если уникальное имя "Название" - "RADIO" и посетитель выбирает из доступных вариантов "Вариант 1", то Вы получите в сообщении на электронную почту следующую строку:
RADIO: Вариант 1 (пример)
Кнопка "Добавить" позволяет Вам добавить новые "Опции" для элемента формы "Переключатель".
Screenshot_6.png
После нажатия на кнопку "Добавить" появляется новое окно "Добавить элемент", где Вы можете задать "Значение" и "Заголовок" опции.
Screenshot_1.png
Поле "Значение" позволяет Вам задать уникальное значение выбираемой опции, которое Вы увидите в сообщении на электронной почте после Названия Переключателя. 
Пример: если уникальное имя "Название" Переключателя "RADIO" и пользователь выбирает опцию c Заголовком "Вариант 3", которая имеет Значение "var3", то Вам на почту придет сообщение со следующей строкой: 
RADIO: var3 (пример).
Поле "Заголовок" позволяет Вам задать уникальное название опции, отображаемое в Переключателе и видимое посетителем на сайте.
Screenshot_8.png
После создания опции, которая имеет "Значение" и "Заголовок", Вы можете сделать эту опцию пунктом, выбранным по умолчанию, отредактировать либо удалить.
Screenshot_1.png
Позиция каждой опции может быть изменена перетаскиванием.

Screenshot_9.png
Обратите внимание: если Вам нужна опция с пустым значением, только одна опция может иметь пустое "Значение".
"Позиционирование варианта" - это функция, которая позволяет изменить расположение следующих опций в Переключателе на "Вертикальное" либо "Горизонтальное".
Screenshot_1.png
Функция "Обязательное поле" позволяет Вам сделать обязательным выбор какой-то опции из Переключателя, не разрешая отправить сообщение через расширенную форму связи не выбрав какую-либо опцию из этого Переключателя.
Screenshot_1.png
Блок "Отображение" состоит из следующих функций: "Отступы""Устройства" и "Выравнивание".
Screenshot_1.png
"Файл" - это элемент формы, который позволяет посетителю добавить прикрепленный файл при отправке сообщения через форму связи.Screenshot_1.png
Элемент формы "Файл" имеет 2 вкладки: "Настройки" и "Дизайн".
Screenshot_2.png
Блок "Свойства" имеет следующие функции: "Название", "Плейсхолдер", "Текст кнопки".

Screenshot_3.png
"Название" - это функция, позволяющая задать уникальный идентификатор (ключ), который Вы получите на электронную почту.  Внимание: на данный момент эта информация не отображена в письмах для элемента "Файл".
Screenshot_4.png
"Плейсхолдер" - это функция, позволяющая Вам задать текст, отображаемый внутри поля вместо названия прикрепляемого файла до выбора файла.

Screenshot_5.png"" - это функция, позволяющая Вам задать название кнопки добавления файла.
Screenshot_6.png
Блок "Описание" позволяет Вам устанавливать описание под каждым элементом "Файл" как подсказку для лучшего понимания посетителем сайта назначения поля. Вы также можете задать его выравнивание для различных устройств по отдельности.
Screenshot_7.png
"Валидация" - это функция, позволяющая Вам настроить проверку файлов: Вы можете запретить отправку сообщений через форму связи, если не добавлен файл - следует выбрать опцию "Обязательное поле"; настроить какие типы файлов посетители смогут отправлять через форму связи выбрав опцию "Допустимые расширения файлов" и введя желаемые расширения в поле ниже (несколько расширений файлов разделяются запятыми, например: .jpg, .png); задать "Максимальный размер загружаемого файла".
Screenshot_8.png
Обратите внимание: уведомление под функцией "Максимальный размер загружаемого файла" отображает другой лимит на размер загружаемых файлов на основе настроек Вашего сервера. При желании лимит можно увеличить, обратившись к Вашему хостинг-провайдеру с просьбой увеличить значения upload_max_filesizepost_max_size и memory_limit в соответствии с Вашими желаниями. Первое и второе значения должны быть несколько выше третьего. Например:
upload_max_filesize = 256M
post_max_size = 256M
memory_limit = 512M
 
Блок "Отображение" имеет типичную функцию: "Отступы".
Screenshot_9.png
Вкладка "Дизайн" позволяет настроить внешний вид кнопки добавления файла. Доступные пресеты находятся в списке пунктов "Screenshot_10.png
Доступные опции размера кнопки находятся в выпадающем списке "Размер".
Screenshot_11.png
"Кнопка отправки" - это элемент формы, который позволяет посетителю по нажатию на этот элемент отправить всю информацию, введенную в форму связи, на Ваш адрес электронной почты.
Screenshot_12.png
Элемент "Кнопка отправки" разделен на две вкладки: "Настройки" и "Дизайн".
Screenshot_13.png
Вкладка "Настройки" позволяет Вам переименовать кнопку отправки в поле "" и изменить ее размер в выпадающем списке "Размер". Функция "Текст при отправке" позволяет Вам задать текст, отображаемый этой кнопкой во время отправки сообщения формой связи после нажатия на Кнопку отправки.
Screenshot_14.png
Блок "Отображение" имеет следующие типичные функции: "Отступы""Устройства", "Выравнивание".
Screenshot_15.png
Вкладка "Дизайн" позволяет настроить внешний вид кнопки отправки сообщения. Доступные пресеты находятся в списке пунктов "
"Сообщение о статусе" - это элемент формы, который позволяет Вам задать текст сообщения о статусе отправки сообщения формой связи и выбрать стиль текста.
Screenshot_17.png
Блок "Свойства" позволяет Вам настроить текст и стиль следующих сообщений статуса отправки: "Сообщение об отправке""Сообщение отправлено""Сообщение об ошибке".
Screenshot_18.png
Блок "Отображение" имеет следующие типичные функции: "Отступы""Устройства", "Выравнивание".
Screenshot_19.png
"reCAPTCHA" - это элемент формы, который позволяет Вам добавить Google reCAPTCHA в форму связи во избежание отправки спама либо нежелательных автоматизированных рассылок.
Screenshot_20.png
Блок "Свойства" состоит из следующих функций: "Редактировать""Тема""Размер".
Screenshot_21.png
!Важно! Для включения Google reCAPTCHA Вам необходимо вставить API ключи в поля, которые откроются во всплывающем окне "Подключить", которое появляется после нажатия кнопки "Редактировать". API ключи Вы можете получить здесь. Нужная версия - reCAPTCHA v2.
Screenshot_22.png
После перехода по ссылке для генерирования API ключей Google reCAPTCHA, Вы должны будете выполнить в свою учетную запись Google, если вход еще не выполнен. После входа Вы увидите следующие опции: "Название", "Выберите тип reCAPTCHA".

Screenshot_23.pngОпция "Название" позволяет Вам обозначить где именно на Вашем сайте Вы будете использовать reCAPTCHA.
Screenshot_24.pngЗатем Вы выбираете reCAPTCHA v2, Вы сможете указать список используемых этим сайтом доменов (по одному на строку) и принять условия использования. Обратите внимание, что регистрация домена также регистрирует и поддомены. Например: если Вы указываете в списке ниже domain.ru, это автоматически регистрирует subdomain.domain.ru.
Screenshot_25.pngТакже, пожалуйста, обратите внимание, что домены указываются в формате domain.ru без указывания протокола соединения http либо https. Если Вы укажете http либо https в начале домена, то будет отображена ошибка "URL starts with an invalid scheme".
Screenshot_26.pngПосле нажатия кнопки "Регистрация" Вы увидите следующую страницу Google reCAPTCHA, где Вы сможете получить "Ключ" и "Секретный ключ" в секции "Добавление reCAPTCHA на сайт" - "Ключи".
Screenshot_27.png
Обратите внимание: это единственный шаг, строго необходимый для работы элемента формы "reCAPTCHA" на Вашем сайте. Шаг 1: Интеграция на стороне клиента и Шаг 2: Интеграция на стороне сервера, которые предоставляются после секции "Ключи" не нужны, так как это уже встроено в MotoCMS.
Screenshot_28.pngКнопка "Редактировать" позволяет Вам включить Google reCAPTCHA после получения API ключей.
Screenshot_2.png
Вставьте "Ключ" и "Секретный ключ" в соответствующие поля окна "Подключить" и сохраните изменения.
Screenshot_3.png
Функции "Тема" и "Размер" позволяют Вам изменить тему на Светлую либо Темную и установить Нормальный или Компактный размер.
Screenshot_4.png
Блок "Отображение" имеет следующие типичные функции: "Отступы""Устройства", "Выравнивание".
Screenshot_5.png
Поле "Отправлять к" позволяет Вам устанавливать несколько адресов электронной почты как получателей сообщений с Расширенной формы связи, разделяя их запятой.
Screenshot_4.png
Поле "Тема" позволяет Вам задать тему сообщения, отправляемого этой формой связи на Вашу электронную почту. Это поле послужит Вам для определения через какую формы связи Вашего сайта было отправлено сообщение.
Screenshot_5.png
Ниже показано как выглядит тема сообщения на Вашей почте.
Screenshot_11.png
Кнопка "Редактировать сообщения" позволяет Вам настроить текст ошибок, отображаемых элементами Расширенной формы связи.
Screenshot_6.png
Обратите внимание: [[MAX_SIZE]][[MAX_VALUE]][[MIN_VALUE]] - это значения, которые являются максимальными/минимальными для определенного элемента формы, не удаляйте и не изменяйте этот текст. Он будет заменен установленными Вами цифровыми значениями при просмотре сайта.
Screenshot_8.png
 
 

Настройка событий для виджета Расширенной формы связи.


Настойка событий позволяет Вам проверять статистику через Google Analytics, связанную с успешной попыткой и неудачной попыткой отправки сообщения.

Для начала работы с событиями Вам необходимо подключить Google Analytics. В верхнем горизонтальном меню выбираем раздел "Настройки", а в нем подраздел "Аналитика". Далее вставляем код идентификатора отслеживания в соответствующее поле и сохранением изменения.
11.jpg

Если вы еще не создали свою учетную запись Google Analytics, используйте эту ссылку.
22.jpg

После подключения  Google Analytics, в настройках виджета Advanced Contact Form Вам необходимо включить события с помощью кнопки “Редактировать события”
33.jpg

С помощью чекбокса активируйте успешное и не успешное событие отправки.

Событие состоит из следующих компонентов (для каждого из которых в отчете указывается значение, если событие имело место):


категория;

действие;

ярлык (необязательно, но рекомендуется);

значение (необязательно).


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

В данном случае можно оставить стандартное название категории - Advanced Contact Form или использовать уникальной для каждой страницы, к примеру Adv Form - Contact page

Действие - этот параметр используется для обозначения отслеживаемого события. Виджет Advanced Contact Form позволяет Вам отслеживать два основных события - успешную и не успешную отправку сообщения.

К примеру в поле Действие можно указать указать Успешная отправка и Не удалось отправить. Но вы может использовать и собственные обозначения.

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

К примеру - Домашняя страница, Контакты , Обратная связь и т.д

Также поле ярлык является необязательным к заполнению.

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

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

Отрицательные значения не поддерживаются.
55.jpg

Пример настройки всех компонентов события:

Для успешной отправки

  • Категория: Форма связи
  • Действие: Успешная отправка
  • Ярлык: стр. Контакты
  • Значение: 0

Для не успешной отправки

  • Категория: Форма связи
  • Действие: Не успешная отправка
  • Ярлык: стр. Контакты
  • Значение: 0

Сразу после настройки событий в расширенной форме обратной связи аналитика начнет подсчет статистики, которую Вы можете посмотреть в панели управления Google Analytics

Раздел Поведение - События - Обзор

В обзоре событий представлен график и параметры всех событий на Вашем сайте.

Для начала необходимо выбрать период отображение отчета. Дополнительно доступна быстрая сортировка - Час День Неделя Месяц
66.jpg

Далее в таблице будет доступна статистика всех событий по основным параметрам: Всего событий, Уникальные события, Ценность события, Средняя ценность, Сеансов с событием События / Сессия с событием.

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

В это же таблице Вы можете перейти к полной статистике событий и уже более детально ознакомится с отчетом за определенный период.
77.jpg

Дополнительной полезной функцией будет возможность экспорта отчета в PDF, Google таблицу , Excel и csv. Это позволит Вам предоставлять отчеты третьим лицам без необходимости предоставления доступа в панель управления Google Analytics
88.jpg

 
Блок "Действие после отправки" состоит из функции "Действие", которая позволяет задать поведение сайта после отправки сообщения Расширенной формой связи. Доступны следующие опции: "Не выбрано""Открыть страницу""Открыть всплывающее окно""Открыть блог","Открыть запись""Открыть URL""Открыть в лайтбоксе".
Screenshot_9.png
Блок "Отображение" имеет следующие типичные функции: "Отступы""Отображать на".
Screenshot_10.png
Вкладка "Дизайн" позволяет настроить внешний вид Расширенной формы связи. Доступные пресеты отображаются в выпадающем списке "Пресет".
Screenshot_11.png
Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 5 из 11
Еще есть вопросы? Отправить запрос

Комментарии