Документация

1. Описание

Компонент предназначен для простого управления всеми формами на сайте, в том числе без доступа к элементам MODX и предоставляет базовый функционал работы с формами для большинства сайтов.
Особенно удобен, если на вашем сайте используются множественные формы захвата посетителей, например «Получить скидку на этот товар сейчас», «Записаться на приём», «Получить специальное предложение по акции» и т.п.
Вставка таких форм прямо в контент страниц не требует доступа к элементам и вёрстки формы, достаточно указать базовые параметры формы в приложении и поставить вызов в нужное место контента.

При установке компонента можно установить и примеры всех форм на базе bootstarp4.

Возможности:

• Создавайте любые формы и используйте их многократно для отправки разных сообщений
• Простая установка форм в любое место на сайте в т.ч. прямо в контент страницы даже с правами контент-менеджера.
• Поддерживается аттач файлов с контролем по типу, размеру и количеству.
• Заказ в 1 клик со страницы товара, раздела и из корзины (для Minishop2)
• Автоматическая поддржка компонентов msOptionsPrice / msOptionsPrice2*
• Сервис по работе с отзывами клиентов
• Отправка промокода за отзыв (необходим компонент msPromoCode / msPromoCode2*)
• Сохранение данных всех отправляемых форм с включением данных о местоположении отправителя (город и регион).
• Определение местоположения пользователя

Геолокация:

Ваш населённый пункт:

Если настроены соответствующие параметры геолокации в системных настройках, то данные геотаргетинга помещаются в сессию при загрузке сайта и доступны везде с помощью Fenom:

{$.session.mvtForms2.geo.city}
{$.session.mvtForms2.geo.region}

2. Использование

2.1. Настройка формы

Все формы хранятся и настраиваются в приложении mvtForms2:

Каждая форма настраивается индифидуально:

В качестве значения полей «Успешно» и «Ошибка» можно указывать ключ словаря. Например:

[[%mvtforms2_question_submit_success_answer]]

Данные форм:

Отзывы:

2.2. Настройка чанков форм

Чанки форм, созданные на основе форм-примеров (устанавливаются вместе с компонентом) не нуждаются в дополнительных настройках. Примеры сделаны на разметке Bootstrap4.

Обязательные переменные, без которых ничего не заработает: {$formID}, {$token}
Класс .mvtFormPhone необходим для работы маски ввода номера телефона.

2.3. Включение форм

• специальной строкой в контенте/чанке/шаблоне:
  

  /form2:[идентификатор формы]/ , например: /form2:callback/

• шаблонизатор Fenom
  

  {'!mvtForms2' | snippet : ['form'=>'callback']} , где form - Идентификатор нужной формы

• MODX parser
  

  [[!mvtForms2?&form=`callback`]]

Начиная с версии 1.0.20 можно передавать в чанки форм любые данные:

{'!mvtForms2' | snippet : [
    'form'=>'callback', 
    'name' => 'Название формы', 
    'button' => 'Название кнопки'
]}

2.4. Системные настройки

2.5. Системные события

Компонент добавляет 4 системных события:

В плагине mvtForms приведены примеры; можно сразу использовать раскомментировав соответствующий участок кода.

2.6. JS

Компонент использует один сжатый js-файл: mvt.min.js.
Он содержит функционал обработки форм + jquery mask для поля телефона + multifile для прикрепления файлов.

Исходные js-файлы доступны в assets/components/mvtforms2/js/web/. При необходимости вы можете изменить логику обработчика, состав дополнительных скриптов и собрать свой файл mvt.min.js.

Настройка multifile - в соответствии с документацией.

Для различных целей (например, метрики Яндекса), можно использовать callbacks:

$(document).ready(function ($) {
    mvtForms2.callbacks.success = function(response) {
        console.log(response);
    };
    mvtForms2.callbacks.error = function(response) {
        console.log(response);
    }
    mvtForms2.callbacks.fail = function(response) {
        console.log(response);
    }
});
            

Пример использование callbacks для кастомизации работы формы

2.7. Использование SmartCaptcha (начиная с версии 1.1.8)

Тарификация SmartCaptcha: https://yandex.cloud/ru/docs/smartcaptcha/pricing .

Для включения капчи необходимо указать значения для системных настроек Смарткапча ключ сайта и Смарткапча ключ сервера. Как настроить SmartCaptcha и получить ключи, смотрите здесь: https://yandex.cloud/ru/docs/smartcaptcha/concepts/keys.

После настройки капчи добавьте в чанк с формой следующий код:

<div style="height: 100px" id="captcha-container" class="smart-captcha" data-sitekey=""></div>
<script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer></script> 

3. Примеры

4. Кейсы

5. Changelog

1.0.19-beta
==============
- добавлен параметр button для передачи названия кнопки отправки в чанк

1.0.18-beta
==============
- добавлена возможность указания лексикона в полях ответа при отправке формы

1.0.17-beta
==============
- добавлена проверка длины номера телефона
- изменён способ подключения jQuery ( убран document.write() )

1.0.16-beta
==============
- увеличена длина поля redirect

1.0.15-beta
==============
- добавлен параметр формы ghost_send (Без фактической отправки)

1.0.14-beta
==============
- поле fields mvtForms2Forms изменено на text

1.0.13-beta
==============
- добавлено событие после проверки формы: MvtFormsAfterCheck

1.0.12-beta
==============
- для отзывов добавлен флаг «Рекомендованный» (recommended, класс mvtForms2FormsData)

1.0.11-beta
==============
- добавлено событие при публикации отзыва: MvtFormsOnReviewPublished


1.0.10-beta
==============
- добавлена возможность передачи названия и описания формы при запуске сниппета

1.0.9-beta
==============
- обновлен интерфейс настройки формы в админке

1.0.8-beta
==============
- добавлена возможность отправки неполных форм

1.0.7-beta
==============
- добавлен плэйсхолдер formDescription

1.0.6-beta
==============
- исправлены системные события

1.0.5-beta
==============
- обновлён default.js & mvtforms2.min.js

1.0.4-beta
==============
- в response добавлен идентификатор формы

1.0.3-beta
==============
- Исправлена ошибка обращения к minishop2, если он не установлен

1.0.2-beta
==============
- Исправлены ошибки установщика

1.0.1-beta
==============
- Первый релиз